/* EMS UI Motion V1 — V306.04
   Pure presentation layer. No API, polling or data-flow changes. */
:root{
  --ems-motion-fast:140ms;
  --ems-motion-base:210ms;
  --ems-motion-slow:320ms;
  --ems-motion-ease:cubic-bezier(.2,.7,.2,1);
  --ems-motion-ease-out:cubic-bezier(.16,1,.3,1);
}

html.ems-motion-enabled body{
  opacity:.001;
  transform:translateY(4px);
}
html.ems-motion-enabled body.ems-motion-ready{
  opacity:1;
  transform:none;
  transition:opacity var(--ems-motion-base) var(--ems-motion-ease),transform var(--ems-motion-base) var(--ems-motion-ease);
}
html.ems-motion-enabled body.ems-page-leaving{
  opacity:.15;
  transform:translateY(2px);
  transition:opacity var(--ems-motion-fast) ease,transform var(--ems-motion-fast) ease;
}

/* Tactile controls without changing layout. */
.btn,
button,
.sidebar-link,
.cabinet-week-card-v30552,
.cabinet-quick-action-v30551,
.cabinet-quick-submit-v30553,
.cabinet-quick-full-form-v30553,
.card,
.promotion-card{
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover) and (pointer:fine){
  .card,
  .cabinet-week-card-v30552,
  .cabinet-quick-direct-card-v30553,
  .promotion-card,
  .settings-card,
  .discipline-card,
  .discipline-side-card{
    transition:transform var(--ems-motion-base) var(--ems-motion-ease),border-color var(--ems-motion-base) ease,box-shadow var(--ems-motion-base) ease,background-color var(--ems-motion-base) ease;
  }
  .card:hover,
  .cabinet-week-card-v30552:hover,
  .cabinet-quick-direct-card-v30553:hover,
  .promotion-card:hover,
  .settings-card:hover,
  .discipline-card:hover,
  .discipline-side-card:hover{
    transform:translateY(-2px);
  }
  .cabinet-week-card-v30552:hover .cabinet-week-card-copy-v30552 strong,
  .cabinet-quick-full-form-v30553:hover span{
    transform:translateX(2px);
  }
}
.btn:active:not(:disabled),
button:active:not(:disabled),
.cabinet-week-card-v30552:active{
  transform:translateY(1px) scale(.992);
  transition-duration:70ms!important;
}
.cabinet-week-card-copy-v30552 strong,
.cabinet-quick-full-form-v30553 span{
  transition:transform var(--ems-motion-fast) var(--ems-motion-ease);
}

/* Cabinet entrance stagger. */
.ems-motion-item{
  opacity:0;
  transform:translateY(10px);
}
.ems-motion-item.ems-motion-item-in{
  opacity:1;
  transform:none;
  transition:opacity var(--ems-motion-slow) var(--ems-motion-ease-out),transform var(--ems-motion-slow) var(--ems-motion-ease-out);
  transition-delay:var(--ems-motion-delay,0ms);
}

/* Loading/skeleton treatment: decorates existing loading states only. */
.cabinet-stats-loading,
.ems-loading-pulse{
  position:relative;
  overflow:hidden;
  color:var(--text-muted)!important;
}
.cabinet-stats-loading::after,
.ems-loading-pulse::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.055) 45%,rgba(255,255,255,.12) 52%,rgba(255,255,255,.055) 59%,transparent 100%);
  transform:translateX(-110%);
  animation:emsSkeletonSweep 1.35s ease-in-out infinite;
}
@keyframes emsSkeletonSweep{to{transform:translateX(110%)}}

/* Smooth DOM updates for key dashboard values/statuses. */
.ems-value-updated{
  animation:emsValueUpdate 300ms var(--ems-motion-ease-out);
}
@keyframes emsValueUpdate{
  0%{opacity:.35;transform:translateY(3px)}
  100%{opacity:1;transform:none}
}

/* Sidebar: one consistent active marker and calmer hover. */
#ems-sidebar .sidebar-link{
  position:relative;
  transition:background-color var(--ems-motion-base) ease,color var(--ems-motion-base) ease,transform var(--ems-motion-fast) var(--ems-motion-ease);
}
#ems-sidebar .sidebar-link::after{
  content:"";
  position:absolute;
  left:2px;
  top:50%;
  width:3px;
  height:0;
  border-radius:999px;
  background:var(--accent);
  transform:translateY(-50%);
  opacity:0;
  transition:height var(--ems-motion-base) var(--ems-motion-ease-out),opacity var(--ems-motion-fast) ease;
}
#ems-sidebar .sidebar-link.active::after{
  height:58%;
  opacity:1;
}
@media (hover:hover) and (pointer:fine){#ems-sidebar .sidebar-link:hover{transform:translateX(2px)}}

/* Accordions/details. Existing JS continues to own the state. */
details > summary{transition:color var(--ems-motion-fast) ease,background-color var(--ems-motion-fast) ease}
#ems-sidebar .sidebar-group-items{transition:grid-template-rows var(--ems-motion-base) var(--ems-motion-ease-out)}
#ems-sidebar .sidebar-section-chevron{transition:transform var(--ems-motion-base) var(--ems-motion-ease-out)!important}

/* Unified EMS modal motion. */
.modal-overlay.active,
.ems-modal-overlay,
.cabinet-quick-overlay-v30551,
.cabinet-kd-overlay-v30554{
  animation:emsOverlayIn var(--ems-motion-base) ease both;
}
.modal-overlay.active .modal,
.ems-modal-overlay .ems-modal,
.cabinet-quick-overlay-v30551 .cabinet-quick-dialog-v30551,
.cabinet-kd-overlay-v30554 > *{
  transform-origin:50% 50%;
  animation:emsModalIn var(--ems-motion-base) var(--ems-motion-ease-out) both;
}
.modal-overlay.ems-modal-closing,
.ems-modal-overlay.ems-modal-closing,
.cabinet-quick-overlay-v30551.ems-modal-closing,
.cabinet-kd-overlay-v30554.ems-modal-closing{
  animation:emsOverlayOut var(--ems-motion-fast) ease forwards!important;
}
.modal-overlay.ems-modal-closing .modal,
.ems-modal-overlay.ems-modal-closing .ems-modal,
.cabinet-quick-overlay-v30551.ems-modal-closing .cabinet-quick-dialog-v30551,
.cabinet-kd-overlay-v30554.ems-modal-closing > *{
  animation:emsModalOut var(--ems-motion-fast) ease forwards!important;
}
@keyframes emsOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes emsOverlayOut{to{opacity:0}}
@keyframes emsModalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes emsModalOut{to{opacity:0;transform:translateY(4px) scale(.99)}}

/* Unified EMS toasts. Existing UI.toast calls stay unchanged. */
.toast-container{
  gap:10px!important;
  pointer-events:none;
}
.toast{
  position:relative;
  overflow:hidden;
  border-radius:14px!important;
  min-width:min(340px,calc(100vw - 32px))!important;
  max-width:min(420px,calc(100vw - 32px))!important;
  padding:14px 16px!important;
  gap:12px!important;
  pointer-events:auto;
  backdrop-filter:blur(14px);
  animation:emsToastIn 280ms var(--ems-motion-ease-out)!important;
}
.toast::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:currentColor;
  opacity:.22;
  transform-origin:left;
  animation:emsToastLife 4s linear forwards;
}
.toast-icon{
  width:30px!important;height:30px!important;
  border-radius:9px;
  background:color-mix(in srgb,currentColor 12%,transparent);
}
.toast-title{font-weight:750!important;letter-spacing:-.01em}
.toast-message{line-height:1.4;margin-top:3px!important}
.toast.success{background:color-mix(in srgb,var(--bg-card) 92%,#22c55e 8%)!important;color:var(--text)!important;border:1px solid color-mix(in srgb,#22c55e 32%,var(--border))!important;border-left:3px solid #22c55e!important}
.toast.error{background:color-mix(in srgb,var(--bg-card) 92%,#ef4444 8%)!important;color:var(--text)!important;border:1px solid color-mix(in srgb,#ef4444 32%,var(--border))!important;border-left:3px solid #ef4444!important}
.toast.warning{background:color-mix(in srgb,var(--bg-card) 92%,#f59e0b 8%)!important;color:var(--text)!important;border:1px solid color-mix(in srgb,#f59e0b 32%,var(--border))!important;border-left:3px solid #f59e0b!important}
.toast.info{background:color-mix(in srgb,var(--bg-card) 94%,#3b82f6 6%)!important;color:var(--text)!important;border:1px solid color-mix(in srgb,#3b82f6 26%,var(--border))!important;border-left:3px solid #3b82f6!important}
.toast.success .toast-title,.toast.success .toast-message,.toast.success .toast-icon,
.toast.error .toast-title,.toast.error .toast-message,.toast.error .toast-icon,
.toast.warning .toast-title,.toast.warning .toast-message,.toast.warning .toast-icon,
.toast.info .toast-title,.toast.info .toast-message,.toast.info .toast-icon{color:inherit!important}
@keyframes emsToastIn{from{opacity:0;transform:translate3d(18px,8px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes emsToastLife{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* Mobile: keep motion subtle and never sacrifice tap speed. */
@media(max-width:640px){
  .toast-container{left:16px!important;right:16px!important;bottom:16px!important;align-items:stretch}
  .toast{width:100%!important;min-width:0!important;max-width:none!important}
  .ems-motion-item{transform:translateY(6px)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  html.ems-motion-enabled body{opacity:1!important;transform:none!important}
  .ems-motion-item{opacity:1!important;transform:none!important}
}