/* ==========================================================================
   HRzest - Motion & depth layer (3D, used by every area of the app)

   Pairs with static/ui-motion.js. Loaded after each area's theme file:
   admin (admin_base.html), employee pages, public pages (landing / login /
   sign-up), Super Admin console.

     .m-rise      3D entrance: element rises + un-rotates into place
     .m-tilt      3D tilt toward the pointer (transform set by JS) + glare
     .m-hero3d    landing hero scene: light mesh, perspective grid, glass cards
     .m-auth-bg   login / sign-up backdrop: drifting light + floating glass shapes

   Everything is disabled for prefers-reduced-motion, and hidden-until-
   animated content has a CSS failsafe so it can never stay invisible.
   ========================================================================== */

/* ── 3D entrance ─────────────────────────────────────────────────────── */
html.m-js .m-rise {
  opacity: 0;
  transform: perspective(1200px) translate3d(0, 26px, -40px) rotateX(9deg);
  transform-origin: 50% 100%;
  /* failsafe: if the script never reveals it, show it anyway */
  animation: m-failsafe 0s linear 2.6s forwards;
}
html.m-js .m-rise.m-in {
  opacity: 1;
  transform: none;
  animation: none;
  transition:
    opacity .7s cubic-bezier(.16, 1, .3, 1) var(--m-delay, 0ms),
    transform .9s cubic-bezier(.16, 1, .3, 1) var(--m-delay, 0ms);
}
@keyframes m-failsafe { to { opacity: 1; transform: none; } }

/* ── 3D tilt + glare ─────────────────────────────────────────────────── */
.m-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}
.m-tilt.m-tilting {
  transition: transform .08s linear, box-shadow .35s ease;
  box-shadow: 0 22px 44px -18px rgba(16, 24, 40, .28), 0 0 0 1px rgba(37, 99, 235, .10) !important;
}
.m-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%);
  opacity: 0; transition: opacity .35s ease; mix-blend-mode: soft-light;
}
.m-tilt.m-tilting .m-glare { opacity: 1; }
.m-tilt > .m-lift { transform: translateZ(28px); }
.m-rel { position: relative; }
/* a tile that has both risen in and is being tilted must follow the pointer
   instantly, not with the slower entrance transition */
html.m-js .m-rise.m-in.m-tilt { transition: opacity .7s ease, transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease; }
html.m-js .m-rise.m-in.m-tilt.m-tilting { transition: transform .08s linear, box-shadow .35s ease; }

/* ── Depth & polish (all areas) ──────────────────────────────────────── */
body:not(.dark-mode) .btn,
body:not(.dark-mode) button,
body:not(.dark-mode) .hbtn { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
body:not(.dark-mode) .btn:active,
body:not(.dark-mode) .hbtn:active,
body:not(.dark-mode) button:active:not(:disabled) { transform: scale(.97); }

/* Admin: frosted top bar, layered card depth */
body:not(.dark-mode) .app-topbar {
  background: rgba(255, 255, 255, .78) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
body:not(.dark-mode) .main .stat-card,
body:not(.dark-mode) .main .section,
body:not(.dark-mode) .stats .stat-card {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -16px rgba(16, 24, 40, .14);
}
/* Sidebar: active item eases in */
.sidebar .nav-item.active,
.sidebar .sb-item.active { animation: m-pill .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes m-pill { from { background-color: transparent; transform: translateX(-6px); } }

/* Stat icons float a little (depth cue) */
body:not(.dark-mode) .stat-card .stat-icon { transform: translateZ(18px); }

/* ── Landing hero 3D scene ───────────────────────────────────────────── */
.hero-section { position: relative; isolation: isolate; overflow: hidden; }
.m-hero3d { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.m-hero3d .m-mesh {
  position: absolute; width: 640px; height: 640px; border-radius: 50%; filter: blur(80px); opacity: .55;
  animation: m-drift 20s ease-in-out infinite alternate;
}
.m-hero3d .m-mesh.a { background: #bfdbfe; top: -240px; left: -160px; }
.m-hero3d .m-mesh.b { background: #c7d2fe; top: -160px; right: -200px; animation-duration: 26s; animation-direction: alternate-reverse; }
.m-hero3d .m-mesh.c { background: #a5f3fc; bottom: -300px; left: 40%; opacity: .35; animation-duration: 30s; }
@keyframes m-drift { to { transform: translate3d(60px, 40px, 0) scale(1.12); } }
.m-hero3d .m-floor {
  position: absolute; left: -50%; right: -50%; bottom: -6%; height: 58%;
  background-image:
    linear-gradient(rgba(37, 99, 235, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .16) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(560px) rotateX(66deg); transform-origin: center top;
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 80%);
  mask-image: linear-gradient(to top, #000 15%, transparent 80%);
  animation: m-floor 7s linear infinite;
}
@keyframes m-floor { to { background-position: 0 64px, 0 0; } }
.m-hero3d .m-glass {
  position: absolute; border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .25));
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 30px 60px -30px rgba(37, 99, 235, .35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: m-orbit 12s ease-in-out infinite;
}
.m-hero3d .m-glass.g1 { width: 120px; height: 120px; right: 6%; top: 14%; transform: rotate3d(1, 1, 0, 28deg); }
.m-hero3d .m-glass.g2 { width: 78px; height: 78px; left: 4%; bottom: 18%; border-radius: 50%; animation-duration: 15s; animation-delay: -4s; }
.m-hero3d .m-glass.g3 { width: 54px; height: 54px; right: 44%; top: 8%; border-radius: 14px; animation-duration: 10s; animation-delay: -7s; }
@keyframes m-orbit {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -22px; rotate: 8deg; }
}
/* the product preview: a 3D scene with layered cards behind it */
.hero-widget { position: relative; transform-style: preserve-3d; animation: m-bob 7s ease-in-out infinite; }
@keyframes m-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.m-layer {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: #ffffff; border: 1px solid #e6e9ef;
  box-shadow: 0 30px 60px -30px rgba(16, 24, 40, .35);
}
.m-layer.l1 { transform: translate3d(18px, 18px, -60px) rotate(2.5deg); opacity: .85; }
.m-layer.l2 { transform: translate3d(34px, 34px, -120px) rotate(5deg); opacity: .55; background: #eef4ff; }
.floating-metric { z-index: 4; }
/* keep the floating info cards off the card's header badge and its buttons */
.hero-widget .floating-metric.fm-1 { top: -46px; right: -26px; }
.hero-widget .floating-metric.fm-2 { bottom: auto; top: 46%; left: -96px; }

/* ── Login / sign-up animated backdrop ───────────────────────────────── */
.m-auth-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.m-auth-bg .m-mesh {
  position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(90px); opacity: .5;
  animation: m-drift 22s ease-in-out infinite alternate;
}
.m-auth-bg .m-mesh.a { background: #bfdbfe; top: -200px; left: -180px; }
.m-auth-bg .m-mesh.b { background: #c7d2fe; bottom: -220px; right: -160px; animation-duration: 28s; animation-direction: alternate-reverse; }
.m-auth-bg .m-glass {
  position: absolute; border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .3));
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 24px 50px -26px rgba(37, 99, 235, .35);
  animation: m-orbit 13s ease-in-out infinite;
}
.m-auth-bg .m-glass.g1 { width: 96px; height: 96px; left: 7%; top: 18%; transform: rotate3d(1, 1, 0, 24deg); }
.m-auth-bg .m-glass.g2 { width: 64px; height: 64px; right: 9%; top: 12%; border-radius: 50%; animation-delay: -5s; }
.m-auth-bg .m-glass.g3 { width: 120px; height: 120px; right: 5%; bottom: 10%; transform: rotate3d(1, -1, 0, 30deg); animation-duration: 17s; }
.m-auth-bg .m-glass.g4 { width: 44px; height: 44px; left: 42%; bottom: 7%; border-radius: 12px; animation-delay: -9s; }
.auth-split .card { transform-style: preserve-3d; }

/* ── Dark theme: keep shapes subtle ──────────────────────────────────── */
body.dark-mode .m-hero3d, body.dark-mode .m-auth-bg { opacity: .35; }

/* ── Reduced motion: no movement at all ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.m-js .m-rise { opacity: 1 !important; transform: none !important; animation: none !important; }
  .m-hero3d *, .m-auth-bg *, .hero-widget, .sidebar .nav-item.active, .sidebar .sb-item.active { animation: none !important; }
  .m-tilt { transform: none !important; }
}
@media (max-width: 768px) {
  .m-layer, .m-hero3d .m-glass { display: none; }
}

/* ==========================================================================
   ADVANCED LAYER (enterprise HRMS style -- Infosys / Zoho / Keka inspired)
   page transitions, collapsible sidebar, gradient welcome banners,
   premium stat cards, shimmer, ripple, animated nav, refined scrollbars
   ========================================================================== */

/* ── 1. App-like page transitions (cross-document View Transitions) ──── */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: app-sidebar; }
.app-topbar { view-transition-name: app-topbar; }
::view-transition-old(root) { animation: m-vt-out .18s ease both; }
::view-transition-new(root) { animation: m-vt-in .38s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes m-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes m-vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ── 2. Collapsible admin sidebar (icon rail) ───────────────────────── */
.sidebar { transition: width .28s cubic-bezier(.16, 1, .3, 1), padding .28s ease; }
.sb-collapse-btn { margin-right: 4px; }
html.sb-collapsed body .sidebar { width: 76px !important; padding: 18px 10px !important; overflow-x: hidden; }
html.sb-collapsed body .sidebar .brand-wrap { justify-content: center; padding: 4px 0 16px; }
html.sb-collapsed body .sidebar .brand-wrap > div:not(.brand-icon),
html.sb-collapsed body .sidebar .sidebar-footer { display: none; }
html.sb-collapsed body .sidebar .nav-item {
  font-size: 0 !important; justify-content: center; gap: 0; padding: 10px 0 !important; position: relative;
}
html.sb-collapsed body .sidebar .nav-icon { font-size: 18px !important; width: 24px; height: 24px; }
html.sb-collapsed body .sidebar .badge-count { position: absolute; top: 3px; right: 10px; font-size: 11px !important; padding: 0 5px; }
html.sb-collapsed body .sidebar .nav-item.active::before { left: -10px; }
/* hover label for the rail (a single fixed element positioned by ui-motion.js) */
.m-sbtip {
  position: fixed; z-index: 3000; pointer-events: none;
  padding: 6px 10px; border-radius: 8px; background: #101828; color: #fff;
  font: 600 12px/1.3 "Inter", "Segoe UI", sans-serif; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .25);
  opacity: 0; transform: translate(-4px, -50%); transition: opacity .15s ease, transform .2s ease;
}
.m-sbtip.show { opacity: 1; transform: translate(0, -50%); }
/* ── 3. (welcome banners removed: both dashboards now use the full-width blue top banner) ── */

/* ── 4. Premium stat cards & tiles ──────────────────────────────────── */
body:not(.dark-mode) .stat-card { position: relative; overflow: hidden; }
body:not(.dark-mode) .stat-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, #2563eb, #60a5fa, #818cf8);
  background-size: 200% 100%; transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  animation: m-shimmer-x 3.5s linear infinite;
}
body:not(.dark-mode) .stat-card:hover::after { transform: scaleX(1); }
@keyframes m-shimmer-x { to { background-position: -200% 0; } }
/* light sweep across a card on hover (shimmer, Infosys-style polish) */
body:not(.dark-mode) .stat-card::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: skewX(-18deg); opacity: 0;
}
body:not(.dark-mode) .stat-card:hover::before { animation: m-sweep .9s ease; }
@keyframes m-sweep { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 0; } }
body:not(.dark-mode) .stat-card .stat-icon { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
body:not(.dark-mode) .stat-card:hover .stat-icon { transform: translateZ(18px) scale(1.12) rotate(-6deg); }

/* dashboard module tiles: arrow slides in on hover */
body:not(.dark-mode) .main .section a > [class*="u-bd-1d5-solid-"] { position: relative; }
body:not(.dark-mode) .main .section a > [class*="u-bd-1d5-solid-"]::after {
  content: "\2192"; position: absolute; right: 16px; top: 50%; translate: -8px -50%;
  font: 600 16px/1 "Inter", sans-serif; color: #2563eb; opacity: 0;
  transition: opacity .25s ease, translate .35s cubic-bezier(.16, 1, .3, 1);
}
body:not(.dark-mode) .main .section a > [class*="u-bd-1d5-solid-"]:hover::after { opacity: 1; translate: 0 -50%; }

/* section titles: animated underline accent */
body:not(.dark-mode) .main .section-title { position: relative; }

/* ── 5. Animated navigation ─────────────────────────────────────────── */
.sidebar .nav-item .nav-icon, .sidebar .sb-item { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .15s, color .15s; }
.sidebar .nav-item:hover .nav-icon { transform: translateX(2px) scale(1.12); }
.sidebar .sb-item:hover { transform: translateX(3px); }
/* tabs (Leaves & Holidays, Admin Tools, Performance ...) - smooth indicator */
.tab-btn, .module-tabs > *, .tab { transition: color .2s ease, border-color .25s ease, background .2s ease; }

/* progress / leave bars fill in with motion */
.leave-bar-fill, [id$="ProgressBar"], .progress-fill, .progress-bar > div { transition: width 1s cubic-bezier(.16, 1, .3, 1); }

/* ── 6. Ripple on buttons ───────────────────────────────────────────── */
.m-ripple-host { position: relative; overflow: hidden; }
.m-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0);
  background: rgba(255, 255, 255, .45); animation: m-ripple .6s ease-out forwards;
}
.btn-secondary .m-ripple, .mini-btn .m-ripple, .hbtn-green .m-ripple { background: rgba(37, 99, 235, .18); }
@keyframes m-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ── 7. Refined scrollbars ──────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #cbd2dc transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #cbd2dc; border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #98a2b3; background-clip: content-box; }

/* ── Reduced motion for the advanced layer ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .main > .page-header, #view-dashboard > .page-header,
  .main > .page-header::before, #view-dashboard > .page-header::before,
  .stat-card::after, .stat-card::before { animation: none !important; }
  .sidebar { transition: none; }
}
@media (max-width: 768px) {
  html.sb-collapsed body .sidebar { width: 100% !important; }
  html.sb-collapsed body .sidebar .nav-item { font-size: 15px !important; }
  .sb-collapse-btn { display: none !important; }
}

/* ==========================================================================
   NEUTRAL STATS (no red / green / orange numbers or icon chips)
   One calm palette for KPI tiles, dashboard module tiles and the onboarding
   overview, in light and dark mode. !important because these colours are
   set inline (style="color:#16a34a") or by per-colour classes (sn-green,
   si-red, u-c-15803d ...).
   ========================================================================== */
:root { --m-num: #101828; --m-muted: #667085; --m-chip-bg: #eef4ff; --m-chip-fg: #2563eb; --m-tile-border: #e6e9ef; }
body.dark-mode { --m-num: #e6edf3; --m-muted: #9da7b3; --m-chip-bg: rgba(56, 139, 253, .15); --m-chip-fg: #79b8ff; --m-tile-border: #30363d; }

/* KPI tiles (admin dashboard, employees page, employee portal, ...) */
.stat-num, .stat-val, .stat-card .num, .stat-card .stat-value { color: var(--m-num) !important; }
.stat-icon { background: var(--m-chip-bg) !important; }
.stat-icon i, .stat-icon .ti { color: var(--m-chip-fg) !important; }

/* Dashboard "Admin Modules" tiles: neutral title, one chip colour */
.main .section a > [class*="u-bd-1d5-solid-"] { border-color: var(--m-tile-border) !important; }
.main .section a > [class*="u-bd-1d5-solid-"] .u-fw-800 { color: var(--m-num) !important; }
.main .section a > [class*="u-bd-1d5-solid-"] > div:first-child { background: var(--m-chip-bg) !important; }
.main .section a > [class*="u-bd-1d5-solid-"] > div:first-child i { color: var(--m-chip-fg) !important; }

/* Onboarding overview boxes (Active / Completed / Overdue) */
.main .section .u-gtc-repeat3_1fr > div { background: transparent !important; border: 1px solid var(--m-tile-border) !important; }
.main .section .u-gtc-repeat3_1fr > div > div:first-child { color: var(--m-num) !important; }
.main .section .u-gtc-repeat3_1fr > div > div:last-child { color: var(--m-muted) !important; }
/* dark mode: beat the pages' own body.dark-mode .sn-* / .si-* !important rules */
html body.dark-mode .stat-card .stat-num, html body.dark-mode .stat-card .stat-val,
html body.dark-mode .stat-card [class*="sn-"], html body.dark-mode .stat-card .num { color: var(--m-num) !important; }
html body.dark-mode .stat-card .stat-icon, html body.dark-mode .stat-card [class*="si-"] { background: var(--m-chip-bg) !important; }
html body.dark-mode .stat-card .stat-icon i { color: var(--m-chip-fg) !important; }