/* ALPHA DESIGN ERP — workspace transition / skeleton loading hardening */
:root{
  --alpha-workspace-transition-ms:240ms;
  --alpha-workspace-exit-ms:72ms;
  --alpha-workspace-enter-ms:168ms;
  --alpha-workspace-ease:cubic-bezier(.2,.7,.2,1);
  --alpha-skeleton-base:color-mix(in srgb,var(--surface-subtle,#f2f4f7) 88%,var(--border-color,#c9dbe4));
  --alpha-skeleton-highlight:color-mix(in srgb,var(--surface,#fff) 86%,transparent);
}

#content.alpha-workspace-transitioning{
  min-height:var(--alpha-transition-reserved-height,360px);
  overflow-anchor:none;
}

#content.alpha-workspace-exiting{
  opacity:0;
  transform:translateY(3px);
  transition:opacity var(--alpha-workspace-exit-ms) var(--alpha-workspace-ease),transform var(--alpha-workspace-exit-ms) var(--alpha-workspace-ease);
  pointer-events:none;
}

/* v4.8.80: sau khi transition hoàn tất, animation-name không được rơi về uiViewIn của
   .content[data-view] (alpha-layout-modern.css) — đó là fade thứ hai làm màn chớp mờ cuối mỗi
   lần điều hướng. Luật này đứng TRƯỚC .alpha-workspace-entering (cùng id+class) để hiệu ứng vào
   của transition vẫn thắng khi đang chạy. */
#content.alpha-workspace-settled{
  animation:none;
}

/* v4.8.80: hiệu ứng vào KHÔNG animate opacity/transform trên chính #content nữa. Trên WebKit, một
   animation như thế thăng cấp cả cây nội dung (2.329 nút ở màn Dự án) thành layer riêng — vẽ lại
   toàn bộ vào texture (đo 330ms) — rồi hạ cấp khi xong (vẽ lại lần nữa, 340ms). Thay vào đó run()
   gắn alpha-workspace-veiled ngay sau commit(): một ::after màu nền canvas (.main) phủ kín #content
   từ lần vẽ đầu; entering chỉ làm mờ dần lớp phủ — hình chữ nhật đơn sắc, compositor xử lý, cây nội
   dung vẽ đúng một lần. isolation:isolate giữ z-index của lớp phủ trong #content (không đè header). */
#content.alpha-workspace-veiled{
  position:relative;
  isolation:isolate;
}
#content.alpha-workspace-veiled::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2147483000;
  background:var(--alpha-canvas,#f7f8fa);
  pointer-events:none;
}
#content.alpha-workspace-entering{
  /* giữ luật này (sau settled) làm mốc thứ tự; hiệu ứng nằm ở ::after bên dưới */
  overflow-anchor:none;
}
#content.alpha-workspace-entering::after{
  animation:alphaWorkspaceEnter var(--alpha-workspace-enter-ms) var(--alpha-workspace-ease) both;
}

.alpha-workspace-skeleton{
  display:grid;
  gap:16px;
  width:100%;
  min-width:0;
  padding-bottom:24px;
}

.alpha-workspace-skeleton__hero,
.alpha-workspace-skeleton__panel{
  border:1px solid var(--border-color,var(--border,#c9dbe4));
  border-radius:18px;
  background:var(--surface,#fff);
  box-shadow:0 8px 24px rgba(15,23,42,.045);
}

.alpha-workspace-skeleton__hero{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr);
  gap:24px;
  padding:22px 24px;
}

.alpha-workspace-skeleton__panel{padding:18px}
.alpha-workspace-skeleton__stack{display:grid;gap:10px;align-content:start}
.alpha-workspace-skeleton__metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.alpha-workspace-skeleton__metric{display:grid;gap:9px;padding:14px;border:1px solid var(--border-color,var(--border,#c9dbe4));border-radius:13px}
.alpha-workspace-skeleton__table{display:grid;gap:9px;margin-top:14px}
.alpha-workspace-skeleton__row{display:grid;grid-template-columns:1.35fr .7fr .8fr .55fr;gap:12px;align-items:center;min-height:42px;padding:0 10px;border-bottom:1px solid color-mix(in srgb,var(--border-color,var(--border,#c9dbe4)) 72%,transparent)}
.alpha-workspace-skeleton__row:first-child{min-height:46px;border-radius:10px;background:var(--surface-subtle,var(--surface-soft,#f8fafc));border-bottom:0}

.alpha-workspace-skeleton__block{
  position:relative;
  display:block;
  overflow:hidden;
  min-height:12px;
  border-radius:999px;
  background:var(--alpha-skeleton-base);
}
.alpha-workspace-skeleton__block::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-105%);
  background:linear-gradient(90deg,transparent 0%,var(--alpha-skeleton-highlight) 48%,transparent 100%);
  animation:alphaWorkspaceShimmer 1.15s ease-in-out infinite;
  will-change:transform;
}
.alpha-workspace-skeleton__block--title{width:min(440px,78%);height:24px}
.alpha-workspace-skeleton__block--subtitle{width:min(620px,92%);height:13px}
.alpha-workspace-skeleton__block--control{width:100%;height:44px;border-radius:11px}
.alpha-workspace-skeleton__block--metric-label{width:56%;height:10px}
.alpha-workspace-skeleton__block--metric-value{width:72%;height:22px}
.alpha-workspace-skeleton__block--cell{width:86%;height:11px}
.alpha-workspace-skeleton__block--cell.short{width:58%}
.alpha-workspace-skeleton__block--cell.tiny{width:42%}

@keyframes alphaWorkspaceShimmer{
  0%{transform:translateX(-105%)}
  100%{transform:translateX(105%)}
}

@keyframes alphaWorkspaceEnter{
  from{opacity:1}
  to{opacity:0}
}

@media (max-width:900px){
  .alpha-workspace-skeleton__hero{grid-template-columns:1fr;padding:18px}
  .alpha-workspace-skeleton__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alpha-workspace-skeleton__row{grid-template-columns:1.2fr .75fr .65fr}
  .alpha-workspace-skeleton__row>*:last-child{display:none}
}

@media (max-width:560px){
  .alpha-workspace-skeleton__metrics{grid-template-columns:1fr}
  .alpha-workspace-skeleton__row{grid-template-columns:1.35fr .65fr}
  .alpha-workspace-skeleton__row>*:nth-child(3){display:none}
}

@media (prefers-reduced-motion:reduce){
  #content.alpha-workspace-exiting,
  #content.alpha-workspace-entering{transition:none!important;animation:none!important;transform:none!important}
  #content.alpha-workspace-veiled::after{animation:none!important;display:none}
  .alpha-workspace-skeleton__block::after{animation:none!important;display:none}
}