/* ============================================================
   Slice 1 教师侧公共交互层样式（window.DUI 配套）
   契约：task/2026-09-20_Slice1设计token与公共交互层.md §5
   规则：本文件只允许引用 var(--dui-*) 语义 token（tokens.css 提供），
        禁止任何十六进制颜色字面值；尺寸/间距全部走 token。
   命名：.dui- 前缀，不与教师页既有类名冲突。
   ============================================================ */

/* ---------- 通用按钮（Confirm/Toast/弹窗内动作） ---------- */
.dui-btn {
  box-sizing: border-box;
  min-height: var(--dui-control-h);
  padding: 0 var(--dui-sp-4);
  border: 1px solid transparent;
  border-radius: var(--dui-radius-control);
  font-size: var(--dui-font-body);
  cursor: pointer;
}
.dui-btn--primary { background: var(--dui-primary); color: var(--dui-on-primary); }
.dui-btn--ghost { background: var(--dui-card); color: var(--dui-text); border-color: var(--dui-line); }
.dui-btn:disabled { background: var(--dui-surface-sub); color: var(--dui-disabled); cursor: not-allowed; border-color: var(--dui-line); }

/* ---------- 弹窗（根级栈容器自建于 body 末尾，不嵌任何页签） ---------- */
.dui-modal-root { }
.dui-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dui-sp-4);
  background: var(--dui-overlay-bg);
  z-index: var(--dui-z-modal);
}
.dui-modal-box {
  box-sizing: border-box;
  width: var(--dui-modal-w);
  max-height: var(--dui-modal-maxh);
  overflow-y: auto;
  background: var(--dui-card);
  border-radius: var(--dui-radius-card);
  box-shadow: var(--dui-shadow);
  padding: var(--dui-sp-6);
}
.dui-modal-title {
  margin: 0 0 var(--dui-sp-4);
  font-size: var(--dui-font-title);
  color: var(--dui-text);
}
.dui-modal-body { color: var(--dui-text); font-size: var(--dui-font-body); }
.dui-modal-box:focus { outline: none; }

/* ---------- 确认层 ---------- */
.dui-confirm-consequence {
  margin: 0 0 var(--dui-sp-4);
  color: var(--dui-text);
  font-size: var(--dui-font-body);
  line-height: 1.6;
}
.dui-confirm-actions {
  display: flex;
  gap: var(--dui-sp-2);
  justify-content: flex-end;
}

/* ---------- Toast ---------- */
.dui-toast-host {
  position: fixed;
  top: var(--dui-sp-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--dui-sp-2);
  z-index: var(--dui-z-toast);
  pointer-events: none;
}
.dui-toast {
  pointer-events: auto;
  box-sizing: border-box;
  min-width: 240px;
  max-width: min(420px, calc(100vw - 32px));
  padding: var(--dui-sp-2) var(--dui-sp-3);
  background: var(--dui-card);
  border-left: 4px solid var(--dui-info);
  border-radius: var(--dui-radius-control);
  box-shadow: var(--dui-shadow);
}
.dui-toast--success { border-left-color: var(--dui-success); }
.dui-toast--warning { border-left-color: var(--dui-warning); }
.dui-toast--danger { border-left-color: var(--dui-danger); }
.dui-toast--info { border-left-color: var(--dui-info); }
.dui-toast-title { color: var(--dui-text); font-size: var(--dui-font-body); font-weight: 700; }
.dui-toast-message { color: var(--dui-text-sub); font-size: var(--dui-font-sub); }
.dui-toast-actions { display: flex; gap: var(--dui-sp-2); justify-content: flex-end; margin-top: var(--dui-sp-2); }
.dui-toast-actions .dui-btn { min-height: var(--dui-control-h); }

/* ---------- 分页（按钮最小 44×44，busy 整组禁用） ---------- */
.dui-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dui-sp-2);
}
.dui-page-btn {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--dui-sp-3);
  border: 1px solid var(--dui-line);
  border-radius: var(--dui-radius-control);
  background: var(--dui-card);
  color: var(--dui-text);
  font-size: var(--dui-font-body);
  cursor: pointer;
}
.dui-page-btn:disabled {
  background: var(--dui-surface-sub);
  color: var(--dui-disabled);
  cursor: not-allowed;
}
.dui-page-status { color: var(--dui-text); font-size: var(--dui-font-body); }
.dui-page-summary { color: var(--dui-text-sub); font-size: var(--dui-font-sub); }

/* ---------- 数据表（值一律 textContent，空态整行提示） ---------- */
.dui-data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--dui-card);
}
.dui-data-table th {
  padding: var(--dui-sp-3);
  background: var(--dui-primary);
  color: var(--dui-on-primary);
  font-size: var(--dui-font-body);
}
.dui-data-table td {
  padding: var(--dui-sp-3);
  border-bottom: 1px solid var(--dui-line);
  color: var(--dui-text);
  font-size: var(--dui-font-body);
}
.dui-data-table td.dui-empty {
  text-align: center;
  color: var(--dui-text-sub);
}

/* ---------- 键盘焦点可见性（仅 DUI 组件范围） ---------- */
.dui-btn:focus-visible,
.dui-page-btn:focus-visible,
.dui-toast-actions button:focus-visible,
.dui-modal-box:focus-visible {
  outline: none;
  box-shadow: var(--dui-focus-ring);
}