/* ux.css — 全局交互增强样式 v1.0 (2026-10-26)
   与 index.html 内联样式配套，只新增元素/覆盖移动端规则，不改原有类。 */

/* ---------- 1. 顶部加载进度条 ---------- */
#ux-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 99999; pointer-events: none; opacity: 0;
  transition: opacity .15s; overflow: hidden;
}
#ux-bar.on { opacity: 1; }
#ux-bar i {
  display: block; height: 100%; width: 35%;
  background: linear-gradient(90deg, #2563c8, #4f9bf0, #2563c8);
  border-radius: 0 2px 2px 0;
  animation: uxbar 1.1s ease-in-out infinite;
}
@keyframes uxbar {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}

/* ---------- 2. Toast ---------- */
#ux-toasts {
  position: fixed; right: 18px; bottom: 72px; z-index: 100000;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.ux-toast {
  pointer-events: auto; display: flex; gap: 8px; align-items: flex-start;
  max-width: 420px; background: #fff; border: 1px solid #dce6f5;
  border-left: 4px solid #2563c8; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16,35,64,.16);
  padding: 10px 14px; font-size: 13px; color: #1a2940;
  line-height: 1.5; cursor: pointer;
  animation: uxin .18s ease;
}
.ux-toast.ux-error { border-left-color: #e74c3c; }
.ux-toast.ux-success { border-left-color: #22c55e; }
.ux-toast.out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.ux-ti { font-weight: 700; flex-shrink: 0; }
.ux-toast.ux-error .ux-ti { color: #e74c3c; }
.ux-toast.ux-success .ux-ti { color: #16a34a; }
.ux-toast.ux-info .ux-ti { color: #2563c8; }
.ux-tm { white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow: auto; }
@keyframes uxin {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 3. 表头排序 ---------- */
#content table th.ux-th-sort { cursor: pointer; user-select: none; }
#content table th.ux-th-sort:hover { background: #eef4fd; }
#content table th.ux-sort-asc::after { content: ' \25B2'; font-size: 9px; color: #2563c8; }
#content table th.ux-sort-desc::after { content: ' \25BC'; font-size: 9px; color: #2563c8; }

/* ---------- 4. 菜单搜索 ---------- */
#ux-navsearch {
  position: sticky; top: 0; z-index: 6;
  padding: 6px 10px 8px; background: #1a3a6b; flex-shrink: 0;
}
#ux-nav-q {
  width: 100%; padding: 7px 26px 7px 10px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 7px;
  background: rgba(255,255,255,.08); color: #e8f0fb;
  font-size: 12.5px; outline: none;
}
#ux-nav-q::placeholder { color: #7fa8d8; }
#ux-nav-q:focus { border-color: #4f9bf0; background: rgba(255,255,255,.14); }
#ux-nav-clear {
  position: absolute; right: 17px; top: 50%; transform: translateY(-50%);
  color: #7fa8d8; cursor: pointer; font-size: 12px; display: none;
  line-height: 1; padding: 3px;
}
#ux-navsearch.has-q #ux-nav-clear { display: block; }
#ux-nav-clear:hover { color: #fff; }
.ux-nav-empty { padding: 14px 12px; color: #7fa8d8; font-size: 12px; text-align: center; }

/* ---------- 5. 移动端：汉堡按钮 / 抽屉 / 表格横向滚动 ---------- */
#ux-burger { display: none; }
#ux-backdrop {
  position: fixed; inset: 0; background: rgba(10,22,40,.45);
  z-index: 9989; opacity: 0; pointer-events: none; transition: opacity .25s;
}

@media (max-width: 768px) {
  #ux-burger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 8px; left: 10px; z-index: 9991;
    width: 40px; height: 40px; padding: 0; border: none; border-radius: 10px;
    background: #1a3a6b; color: #fff; font-size: 18px; line-height: 1;
    cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  }
  #ux-burger:active { background: #2563c8; }

  /* 覆盖原内联 @media 的 display:none，改为可滑出的抽屉 */
  #sidebar {
    display: flex !important;
    position: fixed; top: 0; left: 0; bottom: 0;
    height: 100vh; width: 252px; max-width: 82vw;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    z-index: 9990;
    box-shadow: 2px 0 18px rgba(0,0,0,.28);
  }
  body.ux-open #sidebar { transform: translateX(0); }
  body.ux-open #ux-backdrop { opacity: 1; pointer-events: auto; }

  #main header { padding-left: 58px; }
  #content { padding: 14px; }
  #content .page { overflow-x: auto; }
  #content .card { overflow-x: auto; }
  #content table { min-width: 520px; }

  #ux-toasts { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .ux-toast { max-width: none; }
}