/* ERP Es Mamang — lapisan tampilan modern & animasi (v1.8)
   Dimuat setelah app.css. Semua animasi otomatis mati bila perangkat meminta "kurangi gerakan". */

:root{--ease:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}

/* ---------- Warna tema (aksen) — dipilih lewat ikon palet di atas ---------- */
:root[data-accent="merah"]{--brand:#E11D48;--brand-2:#FB7185;--grad:linear-gradient(135deg,#FB7185 0%,#F43F5E 45%,#BE123C 100%)}
:root[data-accent="hijau"]{--brand:#16A34A;--brand-2:#84CC16;--grad:linear-gradient(135deg,#A3E635 0%,#22C55E 45%,#15803D 100%)}
:root[data-accent="biru"]{--brand:#2563EB;--brand-2:#38BDF8;--grad:linear-gradient(135deg,#38BDF8 0%,#3B82F6 45%,#1D4ED8 100%)}
:root[data-accent="ungu"]{--brand:#7C3AED;--brand-2:#C084FC;--grad:linear-gradient(135deg,#C084FC 0%,#8B5CF6 45%,#6D28D9 100%)}
:root[data-accent="kopi"]{--brand:#92400E;--brand-2:#D97706;--grad:linear-gradient(135deg,#F59E0B 0%,#B45309 50%,#78350F 100%)}
:root[data-accent="teal"]{--brand:#0D9488;--brand-2:#2DD4BF;--grad:linear-gradient(135deg,#5EEAD4 0%,#14B8A6 45%,#0F766E 100%)}
:root[data-accent]:not([data-accent="oranye"]){--brand-soft:color-mix(in srgb,var(--brand) 12%,var(--card))}
:root[data-accent]:not([data-accent="oranye"]) .btn:not(.ghost):not(.green):not(.red):not(.blue){background:var(--grad);box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 28%,transparent)}
:root[data-accent]:not([data-accent="oranye"]) .app-card{box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 22%,transparent)}

.accent-dd .dd-menu{min-width:232px;padding:12px}
.accent-dd h5{margin:0 0 10px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600}
.accent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.accent-grid button{display:flex!important;flex-direction:column;align-items:center;gap:5px;padding:0!important;background:none!important;font-size:10.5px!important;color:var(--muted)!important}
.accent-grid i{width:34px;height:34px;border-radius:50%;display:block;box-shadow:inset 0 0 0 3px var(--card),0 0 0 2px transparent;transition:transform .2s var(--ease-spring),box-shadow .2s}
.accent-grid button:hover i{transform:scale(1.1)}
.accent-grid button.on i{box-shadow:inset 0 0 0 3px var(--card),0 0 0 2px var(--text)}
.accent-grid button.on{color:var(--text)!important;font-weight:600}

/* ---------- Bilah progres navigasi (atas layar) ---------- */
#nav-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;background:var(--grad);box-shadow:0 0 10px var(--brand);border-radius:0 3px 3px 0;opacity:0;transition:width .4s var(--ease),opacity .3s}
#nav-progress.go{opacity:1;width:70%;transition:width 6s cubic-bezier(.1,.6,.2,1),opacity .1s}

/* ---------- Konten halaman masuk bertahap ---------- */
@keyframes esm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes esm-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes esm-fade{from{opacity:0}to{opacity:1}}
.anim-in{animation:esm-rise .55s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
.anim-pop{animation:esm-pop .5s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
.tbl tbody tr.anim-row{animation:esm-fade .45s ease both;animation-delay:calc(var(--i,0) * 22ms)}

/* ---------- Kartu & KPI ---------- */
.card,.kpi{transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.08)}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:currentColor;opacity:.035;pointer-events:none}
.card:hover{box-shadow:0 6px 20px rgba(16,24,40,.06)}

/* ---------- Tombol ---------- */
.btn,.icon-btn,.pill,.tab,.rail-btn,.side-link,.prod,.chip,.line-btn{transition:transform .15s var(--ease),background-color .2s,color .2s,box-shadow .2s,filter .2s}
.btn:active,.prod:active,.line-btn:active,.pill:active{transform:scale(.96)}
.icon-btn:active,.rail-btn:active{transform:scale(.9)}
.btn{position:relative;overflow:hidden}
.btn:not(.ghost):hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(242,96,12,.28)}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);pointer-events:none;animation:esm-ripple .6s ease-out forwards}
.btn.ghost .ripple,.icon-btn .ripple{background:color-mix(in srgb,var(--brand) 25%,transparent)}
@keyframes esm-ripple{to{transform:scale(2.6);opacity:0}}

/* ---------- Dropdown & menu (muncul halus) ---------- */
.dd-menu{display:block!important;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .18s ease,transform .22s var(--ease),visibility 0s linear .22s}
.dd.open>.dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .25s var(--ease-spring),visibility 0s}
.dd-menu.up{top:auto;bottom:calc(100% + 10px);transform-origin:bottom left;transform:translateY(8px) scale(.97)}

/* ---------- Modal ---------- */
@keyframes esm-back{from{background:rgba(15,18,28,0);backdrop-filter:blur(0)}to{background:rgba(15,18,28,.45);backdrop-filter:blur(3px)}}
@keyframes esm-modal{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.modal.open{animation:esm-back .25s ease both;backdrop-filter:blur(3px)}
.modal.open .modal-box{animation:esm-modal .38s var(--ease-spring) both}

/* ---------- Notifikasi melayang (toast) ---------- */
@keyframes esm-toast-in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.toast-anim{animation:esm-toast-in .35s var(--ease-spring) both}
.toast-out{transition:opacity .3s,transform .3s;opacity:0;transform:translateX(30px)}
.content>.alert{animation:esm-rise .45s var(--ease) both}

/* ---------- Rel modul: tooltip & penanda aktif ---------- */
.rail-btn,.rail-tip{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);background:#1F2433;color:#fff;font-size:11.5px;font-weight:500;padding:6px 10px;border-radius:7px;white-space:nowrap;z-index:60;pointer-events:none;animation:esm-tip .2s var(--ease) both;box-shadow:0 6px 16px rgba(0,0,0,.18)}
@keyframes esm-tip{from{opacity:0;transform:translate(-6px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
.rail-btn.on::before{content:"";position:absolute;left:-13px;top:50%;width:4px;height:22px;border-radius:0 4px 4px 0;background:var(--brand);transform:translateY(-50%);animation:esm-bar .35s var(--ease-spring)}
@keyframes esm-bar{from{height:0}to{height:22px}}
.rail-btn:hover{color:var(--brand)}
.rail-logo .logo{transition:transform .5s var(--ease-spring)}
.rail-logo:hover .logo{transform:rotate(-12deg) scale(1.08)}

/* Kartu profil dari avatar rel (seperti contoh video) */
.rail-user .dd-menu{left:6px;min-width:268px;padding:0;overflow:hidden;border-radius:12px}
.ru-head{display:flex;align-items:center;gap:12px;padding:16px;background:var(--gray-soft)}
.ru-head .avatar{width:46px;height:46px;font-size:16px}
.ru-head b{display:block;font-size:14px}.ru-head small{color:var(--muted);font-size:12px}
.ru-link{display:flex!important;align-items:center;gap:12px;padding:12px 16px!important;border-radius:0!important}
.ru-link .ru-ic{width:32px;height:32px;border-radius:8px;background:var(--brand-2);color:#fff;display:flex;align-items:center;justify-content:center}
.ru-link b{display:block;font-size:13px;font-weight:600}.ru-link small{color:var(--muted)}
.ru-out{margin:4px 16px 16px;width:calc(100% - 32px)!important;justify-content:center;height:40px;border-radius:8px!important;background:var(--grad)!important;color:#fff!important;font-weight:600}
.ru-out:hover{filter:brightness(1.06)}

/* ---------- Sidebar: lipat di layar lebar, animasi menu ---------- */
@media (min-width:861px){
  .hamburger{display:inline-flex}
  .side{transition:width .32s var(--ease),opacity .25s,border-color .3s;overflow:hidden}
  body.side-collapsed .side{width:0;opacity:0;border-right-color:transparent}
  body.side-collapsed .side *{pointer-events:none}
}
.side-link{position:relative}
.side-link:hover{transform:translateX(3px)}
.side-link.on{background:color-mix(in srgb,var(--brand) 7%,transparent)}
.side-link .side-ic{transition:transform .3s var(--ease-spring),background .2s,color .2s}
.side-link:hover .side-ic{transform:scale(1.12) rotate(-6deg)}
.side-scroll>*{animation:esm-rise .4s var(--ease) both;animation-delay:calc(var(--i,0) * 22ms)}

/* ---------- Beranda: kartu aplikasi ---------- */
.launch-head{animation:esm-rise .6s var(--ease) both}
.launch-head h1{background:linear-gradient(90deg,var(--text) 0 35%,var(--brand) 50%,var(--text) 65% 100%);background-size:300% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:esm-shine-text 3.5s ease-in-out 1s 1 both}
@keyframes esm-shine-text{from{background-position:100% 0}to{background-position:0 0}}
.apps{perspective:1200px}
.app-card{border-radius:14px;overflow:hidden;animation:esm-card-in .7s var(--ease) both;animation-delay:calc(120ms + var(--i,0) * 80ms);transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
@keyframes esm-card-in{from{opacity:0;transform:translateY(30px) rotateX(10deg) scale(.95)}to{opacity:1;transform:none}}
.app-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% -10%,rgba(255,255,255,.35),transparent 45%),radial-gradient(circle at 110% 110%,rgba(0,0,0,.12),transparent 50%);pointer-events:none}
.app-card::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none;opacity:0}
.app-card:not(.locked):hover::after{animation:esm-sweep .9s ease}
@keyframes esm-sweep{from{left:-75%;opacity:1}to{left:130%;opacity:1}}
.app-card:not(.locked):hover{box-shadow:0 22px 40px rgba(242,96,12,.32)}
.app-card .art{position:relative}
.app-card .art::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14);filter:blur(2px);transition:transform .5s var(--ease)}
.app-card:hover .art::before{transform:scale(1.15)}
.app-card .art>*{position:relative;animation:esm-float 4.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.7s)}
@keyframes esm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.app-card:not(.locked):hover .art>*{animation-duration:2.2s}
.app-card .open{transition:background .25s,transform .25s var(--ease);backdrop-filter:blur(4px)}
.app-card:not(.locked):hover .open{background:#fff;color:var(--brand);transform:translateY(-2px)}
.app-card.locked{filter:saturate(.85)}
.app-card.locked .lock{animation:esm-wiggle 3s ease-in-out infinite 2s}
@keyframes esm-wiggle{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-12deg)}96%{transform:rotate(10deg)}}
.home-ann{animation:esm-rise .55s var(--ease) .08s both}

/* ---------- Kasir ---------- */
.prod{transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.prod:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(16,24,40,.08);border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.prod .pimg img{transition:transform .5s var(--ease)}
.prod:hover .pimg img{transform:scale(1.06)}
.prod.bump{animation:esm-bump .35s var(--ease-spring)}
@keyframes esm-bump{50%{transform:scale(.94)}}
.ci{animation:esm-rise .3s var(--ease) both}

/* ---------- Grafik & bar ---------- */
.chart svg rect[fill="#F2600C"]{fill:var(--brand)}
.chart svg rect[fill="#FDBA74"]{fill:color-mix(in srgb,var(--brand) 40%,#fff)}
.chart svg rect{transform-box:fill-box;transform-origin:bottom;animation:esm-grow-y .7s var(--ease) both;animation-delay:calc(var(--i,0) * 18ms)}
@keyframes esm-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bl-bar i,.progress i{transform-origin:left;animation:esm-grow-x .9s var(--ease) .15s both}
@keyframes esm-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Halaman masuk ---------- */
.login-hero .login-tag{animation:esm-rise .9s var(--ease) .1s both}
.login-hero .brand{animation:esm-fade .8s ease both}
.login-hero .blob{animation:esm-blob 9s ease-in-out infinite}
.login-hero .blob:nth-child(odd){animation-duration:12s;animation-direction:reverse}
@keyframes esm-blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(18px,-14px) scale(1.06)}66%{transform:translate(-12px,10px) scale(.96)}}
.login-form>*{animation:esm-rise .6s var(--ease) both}
.login-form>*:nth-child(2){animation-delay:.08s}.login-form>*:nth-child(3){animation-delay:.16s}.login-form>*:nth-child(4){animation-delay:.24s}
.login input:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 15%,transparent)}

/* ---------- Input ---------- */
input,select,textarea{transition:border-color .2s,box-shadow .2s,background-color .2s}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}

/* ---------- Ganti tema terang/gelap: lingkaran menyebar ---------- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ---------- Hormati pengaturan "kurangi gerakan" ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important}
}
@media print{#nav-progress{display:none}.anim-in,.anim-pop,.app-card{animation:none!important}}