/* ==========================================================================
   ALPHA DESIGN ERP Cloud v4.8.14 — UI FOUNDATION + COMPOSITOR MOTION HARDENING
   Canonical ownership for modern workspace tokens and legacy compatibility
   aliases. Loaded immediately after alpha-design-system.css.
   ========================================================================== */
:root{
  --alpha-grid:8px;
  --alpha-zinc-25:#fbfdfe;
  --alpha-zinc-50:#f7f8fa;
  --alpha-zinc-100:#e8eff4;
  --alpha-zinc-200:#d5e1ea;
  --alpha-zinc-300:#bacdd9;
  --alpha-zinc-500:#526c7a;
  --alpha-zinc-700:#395260;
  --alpha-zinc-900:#10293a;
  --alpha-brand-50:#edf4f8;
  --alpha-brand-100:#dce9f1;
  --alpha-brand-600:#1a5777;
  --alpha-brand-700:#14455f;
  --alpha-brand-800:#0e354a;
  --border-color:var(--line);
  --muted-text:var(--muted);
  --alpha-income:#166534;
  --alpha-income-soft:#edf9f0;
  --alpha-expense:#9f2d20;
  --alpha-expense-soft:#fff1ef;
  --alpha-pending:#92400e;
  --alpha-pending-soft:#fff8e6;
  --alpha-canvas:#f7f8fa;
  --alpha-surface:#ffffff;
  --alpha-surface-subtle:#eff5f9;
  --alpha-text:#0e354a;
  --alpha-text-muted:#395260;
  --alpha-line:#d5e1ea;
  --alpha-line-strong:#bacdd9;
  --alpha-border-strong:#bacdd9;
  --alpha-surface-strong:#ffffff;
  --alpha-focus:0 0 0 3px rgba(7,89,133,.18);
  --alpha-context-width:376px;
  --alpha-shadow-sm:0 3px 12px rgba(23,32,42,.045);
  --alpha-shadow-md:0 12px 34px rgba(23,32,42,.09);
}
html[data-theme="dark"]{
  --alpha-canvas:#0b0f14;
  --alpha-surface:#0f2735;
  --alpha-surface-subtle:#14303f;
  --alpha-text:#e6eff4;
  --alpha-text-muted:#a8bfcc;
  --alpha-line:#24404f;
  --alpha-line-strong:#375063;
  --alpha-border-strong:#375063;
  --alpha-surface-strong:#0f2735;
  --alpha-brand-50:#122d3e;
  --alpha-brand-100:#17384c;
  --alpha-brand-600:#63aad0;
  --alpha-brand-700:#84bede;
  --alpha-brand-800:#96c0d7;
  --border-color:var(--line);
  --muted-text:var(--muted);
  --alpha-income:#86efac;
  --alpha-income-soft:#10271b;
  --alpha-expense:#fca5a5;
  --alpha-expense-soft:#301817;
  --alpha-pending:#fcd34d;
  --alpha-pending-soft:#30250f;
  --alpha-focus:0 0 0 3px rgba(56,189,248,.24);
  --alpha-shadow-sm:0 4px 16px rgba(0,0,0,.18);
  --alpha-shadow-md:0 16px 42px rgba(0,0,0,.28);
}


/* Legacy compatibility aliases centralized from Phase 6. */
/* Legacy token bridge. Several older components still reference aliases such
   as --card/--panel/--surface-soft. Without these aliases CSS falls back to
   literal light colors (#fff/#f8fafc), producing white cards in night mode. */
:root{
  --border:var(--line);
  --card:var(--surface);
  --panel:var(--surface);
  --panel-soft:var(--surface-2);
  --surface-1:var(--surface);
  --surface-soft:var(--surface-2);
  --soft:var(--surface-2);
  --table-hover:var(--surface-3);
  --text-muted:var(--muted);
  --text-secondary:var(--muted);
  --brand:var(--primary);
  --brand-soft:var(--surface-3);
  --accent:var(--primary);
  --accent-soft:var(--surface-3);
  --line-strong:#a8bbc7;
  --warning:var(--orange,#f59e0b);
  --danger:var(--red,#ef4444);
  --alpha-warning:var(--alpha-pending,#92400e);
  --alpha-warning-soft:var(--alpha-pending-soft,#fff8e6);
  --alpha-success:var(--alpha-income,#166534);
  --alpha-navy-850:#123b58;
  --department-ring:#dceeff;
}

html[data-theme="dark"]{
  --border:var(--line);
  --card:var(--surface);
  --panel:var(--surface);
  --panel-soft:var(--surface-2);
  --surface-1:var(--surface);
  --surface-soft:var(--surface-2);
  --soft:var(--surface-2);
  --table-hover:var(--surface-3);
  --text-muted:var(--muted);
  --text-secondary:var(--muted);
  --brand:var(--primary);
  --brand-soft:var(--surface-3);
  --accent:var(--primary);
  --accent-soft:var(--surface-3);
  --line-strong:#3b5867;
  --warning:#f3c66b;
  --danger:#ff9eaa;
  --alpha-warning:var(--alpha-pending,#fcd34d);
  --alpha-warning-soft:var(--alpha-pending-soft,#30250f);
  --alpha-success:var(--alpha-income,#86efac);
  --alpha-navy-850:#abd0e4;
  --department-ring:#163242;
}



/* ==========================================================================
   v4.8.14 — GPU / COMPOSITOR MOTION FOUNDATION

   Mục tiêu: giữ các chuyển động UI trên compositor thread bằng transform và
   opacity. Không dùng transition:all; không animate width/height/top/left/
   right/bottom/margin/padding. will-change chỉ được bật cho layer tương tác
   có số lượng nhỏ (sidebar/modal/drawer), không áp dụng đại trà cho Data Grid.
   ========================================================================== */
:root{
  --alpha-motion-ease:cubic-bezier(0.4,0,0.2,1);
  --alpha-motion-xs:80ms;
  --alpha-motion-sm:120ms;
  --alpha-motion-md:180ms;
  --alpha-motion-lg:240ms;
  --alpha-transition-transform:transform var(--alpha-motion-md) var(--alpha-motion-ease);
  --alpha-transition-opacity:opacity var(--alpha-motion-sm) var(--alpha-motion-ease);
  --alpha-transition-compositor:transform var(--alpha-motion-md) var(--alpha-motion-ease),opacity var(--alpha-motion-sm) var(--alpha-motion-ease);
}

/* Utility chỉ dành cho một số layer đang animation. */
.alpha-motion-layer{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}
.alpha-motion-layer.is-animating{
  will-change:transform,opacity;
}

/* Modal/backdrop: entry animation chỉ dùng opacity + transform. Base geometry
   vẫn được layout một lần; không có per-frame width/height/top/left animation. */
.modal-backdrop:not(.hidden),
.confirm-backdrop:not(.hidden),
.action-prompt-backdrop:not(.hidden),
.drawer-backdrop:not(.hidden){
  will-change:opacity;
  animation:alphaCompositorFadeIn var(--alpha-motion-sm) var(--alpha-motion-ease) both;
}
.modal-backdrop:not(.hidden) .modal,
.confirm-backdrop:not(.hidden) .confirm-dialog,
.action-prompt-backdrop:not(.hidden) .action-prompt-dialog{
  transform:translate3d(0,0,0) scale(1);
  opacity:1;
  backface-visibility:hidden;
  will-change:transform,opacity;
  transition:var(--alpha-transition-compositor);
  animation:alphaCompositorDialogIn var(--alpha-motion-md) var(--alpha-motion-ease) both;
}
.right-drawer:not(.hidden){
  transform:translate3d(0,0,0);
  opacity:1;
  backface-visibility:hidden;
  will-change:transform,opacity;
  transition:var(--alpha-transition-compositor);
  animation:alphaCompositorDrawerIn var(--alpha-motion-md) var(--alpha-motion-ease) both;
}

@keyframes alphaCompositorFadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes alphaCompositorDialogIn{
  from{transform:translate3d(0,10px,0) scale(.985);opacity:0}
  to{transform:translate3d(0,0,0) scale(1);opacity:1}
}
@keyframes alphaCompositorDrawerIn{
  from{transform:translate3d(18px,0,0);opacity:.72}
  to{transform:translate3d(0,0,0);opacity:1}
}

/* Accessibility: người dùng yêu cầu giảm chuyển động sẽ không bị ép animation. */
@media(prefers-reduced-motion:reduce){
  .alpha-motion-layer,
  .modal-backdrop,
  .confirm-backdrop,
  .action-prompt-backdrop,
  .drawer-backdrop,
  .modal,
  .confirm-dialog,
  .action-prompt-dialog,
  .right-drawer{
    animation:none;
    transition:none;
    transform:none;
  }
}