/* ============================================================
* 曼象教务 统一设计层 v1（assets/app.css）
* 专业 SaaS 教务后台：克制、统一、蓝色主色 #2563eb
* 各内页
* 外壳在项目根：
* ============================================================ */
:root{
--mx-primary:#2563eb; --mx-primary-hover:#1d4ed8; --mx-primary-light:#eff6ff;
--mx-success:#16a34a; --mx-warn:#ea580c; --mx-danger:#dc2626;
--mx-border:#e5e7eb; --mx-border-soft:#f1f5f9; --mx-bg:#f5f7fa;
--mx-text:#1e293b; --mx-text-2:#64748b; --mx-text-3:#94a3b8;
--mx-card:#ffffff; --mx-radius:12px; --mx-radius-sm:8px;
--mx-shadow:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
--mx-shadow-md:0 4px 12px rgba(15,23,42,.08);
}
html,body{ background:var(--mx-bg); color:var(--mx-text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
/* 滚动条统一 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}
::-webkit-scrollbar-track{background:transparent}
/* 卡片 */
.mx-card{ background:var(--mx-card); border:1px solid var(--mx-border-soft); border-radius:var(--mx-radius); box-shadow:var(--mx-shadow); }
/* 页面标题区 */
.mx-page-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.mx-page-title{ font-size:18px; font-weight:700; color:var(--mx-text); letter-spacing:-.01em; }
.mx-page-sub{ font-size:12.5px; color:var(--mx-text-3); margin-top:2px; }
/* 统计卡 */
.mx-metric{ background:var(--mx-card); border:1px solid var(--mx-border-soft); border-radius:var(--mx-radius); padding:16px 18px; box-shadow:var(--mx-shadow); transition:box-shadow .15s,transform .15s; }
.mx-metric:hover{ box-shadow:var(--mx-shadow-md); }
.mx-metric .mx-m-label{ font-size:12.5px; color:var(--mx-text-3); }
.mx-metric .mx-m-value{ font-size:24px; font-weight:700; color:var(--mx-text); margin-top:6px; line-height:1.1; }
.mx-metric .mx-m-foot{ font-size:12px; color:var(--mx-text-2); margin-top:4px; }
/* 表格统一 */
.mx-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.mx-table thead th{ background:#f8fafc; color:#64748b; font-weight:500; text-align:left; padding:10px 14px; border-bottom:1px solid var(--mx-border); white-space:nowrap; font-size:12.5px; }
.mx-table tbody td{ padding:11px 14px; border-bottom:1px solid var(--mx-border-soft); color:var(--mx-text); vertical-align:middle; }
.mx-table tbody tr{ transition:background .12s; }
.mx-table tbody tr:hover{ background:#f8fafc; }
.mx-table tbody tr:last-child td{ border-bottom:none; }
/* 按钮主次层级 */
.mx-btn{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:8px; font-size:13px; font-weight:500; border:1px solid transparent; transition:all .15s; cursor:pointer; white-space:nowrap; }
.mx-btn-primary{ background:var(--mx-primary); color:#fff; } .mx-btn-primary:hover{ background:var(--mx-primary-hover); }
.mx-btn-ghost{ background:#fff; color:var(--mx-text-2); border-color:var(--mx-border); } .mx-btn-ghost:hover{ background:#f8fafc; color:var(--mx-text); }
.mx-btn-danger{ background:#fff; color:var(--mx-danger); border-color:#fecaca; } .mx-btn-danger:hover{ background:#fef2f2; }
.mx-btn-sm{ height:28px; padding:0 10px; font-size:12.5px; }
/* 徽章/标签 */
.mx-badge{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; font-size:11.5px; font-weight:500; line-height:1; }
.mx-badge-blue{ background:var(--mx-primary-light); color:var(--mx-primary); }
.mx-badge-green{ background:#dcfce7; color:#15803d; }
.mx-badge-orange{ background:#ffedd5; color:#c2410c; }
.mx-badge-red{ background:#fee2e2; color:#b91c1c; }
.mx-badge-gray{ background:#f1f5f9; color:#64748b; }
/* 表单控件统一高度与聚焦 */
.mx-input,.mx-select,.mx-textarea{ height:34px; padding:0 10px; border:1px solid var(--mx-border); border-radius:8px; font-size:13px; color:var(--mx-text); background:#fff; outline:none; transition:border .15s,box-shadow .15s; }
.mx-textarea{ height:auto; padding:8px 10px; }
.mx-input:focus,.mx-select:focus,.mx-textarea:focus{ border-color:var(--mx-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
/* 空状态 */
.mx-empty{ padding:48px 16px; text-align:center; color:var(--mx-text-3); font-size:13px; }
.mx-empty .mx-empty-icon{ font-size:32px; color:#cbd5e1; margin-bottom:10px; }
/* 分隔线 / 面板 */
.mx-divider{ height:1px; background:var(--mx-border-soft); margin:12px 0; }
.mx-section-title{ font-size:13.5px; font-weight:600; color:var(--mx-text); margin:16px 0 10px; }
/* Tab 下划线统一 */
.mx-tabbar{ display:flex; gap:4px; border-bottom:1px solid var(--mx-border); }
.mx-tab{ padding:9px 14px; font-size:13.5px; color:var(--mx-text-2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.mx-tab:hover{ color:var(--mx-primary); }
.mx-tab.active{ color:var(--mx-primary); border-color:var(--mx-primary); font-weight:500; }
/* ============================================================
* 最小移动端适配（<768px）
* ============================================================ */
@media (max-width:768px){
/* 横向表格在窄屏可滑 */
.overflow-x-auto{ -webkit-overflow-scrolling:touch; }
.overflow-x-auto > table, .mx-table{ min-width:640px; }
/* 按钮最小可点击区域 */
.mx-btn, button{ min-height:36px; }
/* 模态框窄屏宽度 */
.mx-modal, [id$="Modal"], .bg-white.rounded-xl.w-96{ max-width:92vw; }
body{ font-size:14px; }
/* 卡片 padding 收窄 */
.mx-card{ padding:12px !important; }
}
/* 触屏滑动优化 */
.overflow-x-auto{ -webkit-overflow-scrolling:touch; }