/* Motion layer shared by every page: page/stagger entrances, button feedback, toasts, route progress, language switch. */

/* --- staggered entrance (classes/indexes are set by ui.js after each render) --- */
.mo{animation:moRise .55s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*55ms + var(--base,0ms))}
@keyframes moRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.main-content{transition:opacity .15s ease,transform .15s ease}
.main-content.is-leaving{opacity:0;transform:translateY(-8px);pointer-events:none}
.topbar{animation:moFade .4s ease backwards}
@keyframes moFade{from{opacity:0}to{opacity:1}}

/* --- route progress bar --- */
.route-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;opacity:0;background:linear-gradient(90deg,#0f9d9a,#5ac8c3);box-shadow:0 0 10px rgba(15,157,154,.6);transition:width .9s cubic-bezier(.1,.6,.2,1),opacity .2s}
.route-progress.run{opacity:1}
.route-progress.done{transition:width .2s ease-out,opacity .3s .15s;opacity:0}

/* --- buttons: hover lift, press, ripple, loading --- */
.primary-button,.outline-button,.icon-button,.nav-item,.lang-switch button{position:relative;overflow:hidden}
a.primary-button,a.outline-button{display:inline-block;text-decoration:none}
.primary-button,.outline-button{transition:transform .18s,box-shadow .18s,background .18s,border-color .18s,color .18s}
.primary-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,157,154,.3)}
.outline-button:hover:not(:disabled){transform:translateY(-1px);border-color:#95dfdb;color:var(--orange,#0f9d9a)}
.primary-button:active:not(:disabled),.outline-button:active:not(:disabled),.icon-button:active{transform:scale(.96)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:moRipple .65s ease-out forwards;pointer-events:none}
.outline-button .ripple,.icon-button .ripple,.nav-item .ripple,.lang-switch .ripple,.landing-secondary .ripple,.landing-login-link .ripple{background:rgba(15,157,154,.22)}
@keyframes moRipple{to{transform:scale(1);opacity:0}}
.primary-button.loading{color:transparent!important;pointer-events:none}
.primary-button.loading::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:moSpin .7s linear infinite}
@keyframes moSpin{to{transform:rotate(360deg)}}
.outline-button.danger{color:#c94c3e;border-color:#f0c4be}
.outline-button.armed{background:#c94c3e;border-color:#c94c3e;color:#fff;animation:moPulse .8s ease infinite}
@keyframes moPulse{50%{box-shadow:0 0 0 5px rgba(201,76,62,.18)}}

/* --- sidebar navigation --- */
.nav-icon{transition:transform .2s}
.nav-item:hover .nav-icon{transform:translateX(2px) scale(1.08)}
.nav-item.active::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--orange,#0f9d9a);transform-origin:center;animation:moBar .4s cubic-bezier(.2,.9,.3,1.2)}
@keyframes moBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.sidebar{transition:transform .28s cubic-bezier(.2,.8,.2,1)}

/* --- language switch --- */
.lang-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;background:#eceff0;border-radius:999px;isolation:isolate}
.lang-switch i{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);background:#fff;border-radius:999px;box-shadow:0 2px 8px rgba(23,32,43,.14);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:-1}
.lang-switch[data-active="ru"] i{transform:translateX(100%)}
.lang-switch button{border:0;background:transparent;padding:6px 13px;font-weight:800;font-size:11px;letter-spacing:.06em;color:#84909b;border-radius:999px;transition:color .2s}
.lang-switch button.on{color:#17202b}
.auth-top{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* --- toasts --- */
.toast-stack{position:fixed;right:20px;bottom:20px;display:grid;gap:10px;z-index:300;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;max-width:360px;padding:13px 16px;border-radius:12px;background:#17202b;color:#fff;font-size:13px;font-weight:600;line-height:1.4;box-shadow:0 16px 40px rgba(23,32,43,.28);opacity:0;transform:translateY(14px) scale(.96);transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.3,1.2)}
.toast.in{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateX(24px)}
.toast svg{flex:0 0 auto;color:#8ae3ad}
.toast.error{background:#7a2b25}
.toast.error svg{color:#ffb4a8}

/* --- forms and tables --- */
.inventory-form input,.inventory-form select,.report-entry-main input,.report-entry-main select,.range-form input,.table-search{transition:border-color .2s,box-shadow .2s}
.inventory-form input:focus,.inventory-form select:focus,.report-entry-main input:focus,.report-entry-main select:focus,.range-form input:focus,.table-search:focus{outline:none;border-color:var(--orange,#0f9d9a);box-shadow:0 0 0 3px rgba(15,157,154,.14)}
.form-message:not([hidden]){animation:moRise .3s ease both}
.form-message.error{color:#c94c3e}
.inventory-table tbody tr{transition:background .15s}
.inventory-table tbody tr:hover{background:#fafbfa}
.inventory-table tbody tr[hidden]{display:none}
.module-kpi{transition:transform .2s,box-shadow .2s}
.module-kpi:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(23,32,43,.07)}
.range-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:18px}
.range-form label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px;font-weight:700}
.range-form input{border:1px solid var(--line);border-radius:6px;padding:10px;background:#fff;color:var(--ink)}
.table-search{margin-left:auto;border:1px solid var(--line);border-radius:8px;padding:9px 12px;min-width:220px;background:#fff;color:var(--ink)}
.readonly-note{display:flex;flex-direction:column;gap:6px;background:#f4f7f5;margin-bottom:18px}
.readonly-note span{color:var(--muted);font-size:12px}
.full-report-row{transition:opacity .2s,transform .2s}
.full-report-row.removing{opacity:0;transform:translateX(20px)}
.page-heading h1{animation:moRise .5s cubic-bezier(.2,.8,.2,1) backwards}

@media(prefers-reduced-motion:reduce){
  .mo,.topbar,.page-heading h1,.toast,.form-message:not([hidden]),.nav-item.active::before,.outline-button.armed{animation:none!important}
  .main-content,.lang-switch i,.sidebar,.toast,.route-progress{transition:none!important}
}