/* ============================================================
   UI 增强层 · 流畅度与好用性专项
   参考：Ant Design / Arco Pro（后台表格与操作规范）、
        NProgress（顶部加载条）、Bootstrap 5 官方组件节奏
   ============================================================ */

/* ---- 1. 顶部页面加载进度条 ---- */
#uiProgress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand), #60a5fa);
  z-index: 2000; border-radius: 0 2px 2px 0;
  opacity: 0; transition: width .25s ease, opacity .3s ease;
  box-shadow: 0 0 8px rgb(29 78 216 / .5);
  pointer-events: none;
}
#uiProgress.active { opacity: 1; }

/* ---- 2. 浮动 Toast（替代原位 alert，自动消失） ---- */
.ui-toast-wrap { position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 1900; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 460px); pointer-events: none; }
.ui-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: .6rem;
  background: #fff; border-radius: 12px; padding: .8rem 1rem;
  box-shadow: var(--shadow-lg); border: 1px solid var(--card-border);
  animation: uiToastIn .28s cubic-bezier(.21,1.02,.73,1) both;
  font-size: .95rem;
}
.ui-toast.out { animation: uiToastOut .25s ease both; }
.ui-toast .ui-ico { font-size: 1.15rem; line-height: 1.3; }
.ui-toast.success { border-left: 4px solid #16a34a; } .ui-toast.success .ui-ico { color: #16a34a; }
.ui-toast.danger  { border-left: 4px solid #dc2626; } .ui-toast.danger .ui-ico { color: #dc2626; }
.ui-toast.warning { border-left: 4px solid #d97706; } .ui-toast.warning .ui-ico { color: #d97706; }
.ui-toast.info    { border-left: 4px solid var(--brand); } .ui-toast.info .ui-ico { color: var(--brand); }
@keyframes uiToastIn  { from { opacity: 0; transform: translateY(-14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes uiToastOut { to   { opacity: 0; transform: translateY(-10px); } }

/* ---- 3. 内容进入动画（轻量 fadeUp，一次性） ---- */
@media (prefers-reduced-motion: no-preference) {
  main.container > * , main.col-md-10 > * { animation: uiFadeUp .3s ease both; }
  main.container > :nth-child(2), main.col-md-10 > :nth-child(2) { animation-delay: .04s; }
  main.container > :nth-child(n+3), main.col-md-10 > :nth-child(n+3) { animation-delay: .08s; }
}
@keyframes uiFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- 4. 表格体验（参考 Arco Pro 数据列表规范） ---- */
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover { background-color: #f0f6ff; }
.table tbody tr:nth-child(even) { background-color: #fbfdff; }
.table tbody tr:hover:nth-child(even) { background-color: #f0f6ff; }
.table th { position: relative; user-select: none; }
.table-sm td, .table-sm th { padding-block: .55rem; }
/* 长表格横向滚动时固定操作列提示 */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ---- 5. 学员端 pill-nav：小屏横向滑动不换行 ---- */
.pill-nav {
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; padding-bottom: 2px;
}
.pill-nav::-webkit-scrollbar { display: none; }
.pill-nav .nav-item { flex: none; scroll-snap-align: start; }
@media (max-width: 767.98px) {
  .pill-nav .nav-link { white-space: nowrap; padding-inline: .85rem; }
}

/* ---- 6. 键盘焦点可见性（无障碍） ---- */
:focus-visible { outline: 3px solid rgb(29 78 216 / .45); outline-offset: 2px; border-radius: 6px; }

/* ---- 7. 空状态 ---- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state i { font-size: 3rem; color: #cbd5e1; display: block; margin-bottom: .8rem; }
.empty-state .btn { margin-top: 1rem; }

/* ---- 8. 提交中按钮（防重复提交） ---- */
.btn.ui-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.ui-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .45); border-top-color: #fff;
  animation: uiSpin .6s linear infinite;
}
.btn-outline-* { --bs-btn-disabled-color: inherit; }
@keyframes uiSpin { to { transform: rotate(360deg); } }

/* ---- 9. 返回顶部 ---- */
#uiBackTop {
  position: fixed; right: 18px; bottom: 22px; z-index: 1500;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--card-border);
  background: #fff; color: var(--brand); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  opacity: 0; transform: translateY(10px); transition: all .25s ease; cursor: pointer;
}
#uiBackTop.show { opacity: 1; transform: none; }
#uiBackTop:hover { background: var(--brand); color: #fff; }

/* ---- 10. 后台侧栏吸附与窄屏横滑 ---- */
.admin-side { position: sticky; top: 0; align-self: flex-start; }
@media (max-width: 767.98px) {
  .admin-side-nav { flex-direction: row !important; overflow-x: auto; padding-top: .75rem !important; }
  .admin-side-nav .nav-link { white-space: nowrap; }
}

/* ---- 11. 数字统计卡微交互 ---- */
.stat-card .num { font-variant-numeric: tabular-nums; }

/* ---- 12. 减少动画偏好尊重 ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}