/* ============================================================
   排课计费系统 - 全局样式 v2.3.2
   设计主题：蓝紫渐变 + 柔和阴影 + 微动效
   说明：本项目使用 Tailwind CSS（CDN）负责大部分布局类，
        业务组件样式（顶栏/侧边栏/卡片/表格/按钮/弹窗/登录页）在本文件定义。
   ============================================================ */

/* ---------- 设计令牌：全局颜色/阴影变量（组件样式统一引用，便于换肤） ---------- */
:root {
    --primary: #4f46e5;          /* 主色（靛蓝）：按钮/导航高亮 */
    --primary-light: #6366f1;    /* 主色浅阶：按钮渐变终点 */
    --primary-lighter: #818cf8;  /* 主色更浅阶：悬停边框 */
    --primary-bg: #eef2ff;       /* 主色背景：悬停底色/图标底 */
    --accent: #8b5cf6;           /* 强调色（紫）：渐变装饰 */
    --success: #10b981;          /* 成功绿：出勤/完成/充值 */
    --warning: #f59e0b;          /* 警告橙：取消/备份/请假 */
    --danger: #ef4444;           /* 危险红：删除/退费/错误 */
    --info: #3b82f6;             /* 信息蓝 */
    --text-main: #1e293b;        /* 正文主色（深蓝灰） */
    --text-sub: #64748b;         /* 次要文字（浅灰蓝） */
    --border: #e2e8f0;           /* 边框色 */
    --bg-page: #f1f5f9;          /* 页面底色 */
    --card-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .04);
    --card-shadow-hover: 0 4px 12px rgba(15, 23, 42, .10), 0 16px 40px rgba(79, 70, 229, .08);
}

/* 全局盒模型统一为 border-box，避免 padding/border 撑破布局 */
* { box-sizing: border-box; }

/* 页面撑满视口高度，保证 flex 纵向布局（顶栏+主体）正确 */
html, body {
    height: 100%;
}

body {
    /* 系统字体栈：优先苹果/微软中文字体，保证跨平台中文渲染清晰 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: var(--bg-page);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
}

/* ---------- 滚动条美化 ---------- */
/* 细滚动条 + 圆角滑块，与整体圆角风格统一 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------- 顶栏 ---------- */
/* 顶栏：蓝紫渐变背景 + 底部柔光阴影，标题文字纯白带轻微投影提升可读性 */
.app-header {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 45%, #8b5cf6 100%);
    box-shadow: 0 2px 16px rgba(79, 70, 229, .25);
    border-bottom: none;
}
.app-header .header-title { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.app-header .header-subtitle { color: rgba(255,255,255,.82); }

/* ---------- 侧边栏 ---------- */
/* 侧边栏：白→浅灰纵向渐变，右侧细阴影分割内容区 */
.app-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 1px 0 8px rgba(15, 23, 42, .04);
}
/* 导航按钮基础态 */
.nav-btn {
    border-radius: 10px;
    transition: all .18s ease;
    font-size: .9rem;
    position: relative;
}
/* 悬停：浅蓝底色 + 主色文字 + 轻微右移 */
.nav-btn:hover {
    background: var(--primary-bg);
    color: var(--primary);
    transform: translateX(2px);
}
/* 选中态：渐变底 + 主色加粗 + 左侧竖条指示（::before） */
.nav-btn.active {
    background: linear-gradient(90deg, #eef2ff 0%, #e0e7ff 100%);
    color: var(--primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .12);
}
/* 选中导航左侧的竖向指示条（蓝紫渐变） */
.nav-btn.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--primary), var(--accent));
}
/* 图标微动效：悬停放大，选中变主色 */
.nav-btn i { transition: transform .18s ease; }
.nav-btn:hover i { transform: scale(1.15); }
.nav-btn.active i { color: var(--primary); }

/* ---------- 内容区 ---------- */
/* Tab 面板切换：默认显示，加 .hidden 隐藏（由 app.js switchTab 控制） */
.tab-content { display: block; }
.tab-content.hidden { display: none; }

/* 页面大标题：文字渐变（深灰→主色）+ 背景裁切，形成渐变标题效果 */
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--text-main), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: .5px;
}

/* ---------- 卡片 ---------- */
/* 通用内容卡片：白色圆角 + 双层柔和阴影，悬停加深阴影形成抬升感 */
.app-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    transition: box-shadow .25s ease, transform .25s ease;
}
.app-card:hover {
    box-shadow: var(--card-shadow-hover);
}
/* 统计卡片中的圆角图标块 */
.app-card .card-icon {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    transition: transform .25s ease;
}
/* 卡片悬停时图标轻微放大旋转，增加互动感 */
.app-card:hover .card-icon { transform: scale(1.08) rotate(-3deg); }
/* 统计大数字（教师总数/学生总数/本月课程） */
.stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.5px;
}

/* ---------- 表格 ---------- */
.app-table { border-collapse: collapse; width: 100%; }
/* 单元格内边距统一 */
.app-table th, .app-table td { text-align: left; padding: 12px 16px; }
/* 表头：浅灰渐变底 + 大写小字 + 底部分隔线，防止换行 */
.app-table thead th {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-sub);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
/* 行分隔线 + 悬停浅蓝高亮 + 隔行浅灰底 */
.app-table tbody tr { border-top: 1px solid #f1f5f9; transition: background .15s ease; }
.app-table tbody tr:nth-child(even) { background: #fcfdfe; }
.app-table tbody tr:hover { background: #eef2ff; }
.app-table tbody td { color: var(--text-main); }

/* ---------- 状态徽章 ---------- */
/* 胶囊形状态标签：左侧小圆点（::before 使用 currentColor）+ 语义化配色 */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
}
/* 在职/已完成：绿色；离职/请假：橙色；已排课：蓝色；已取消：红色 */
.status-active, .status-completed { background: #d1fae5; color: #047857; }
.status-inactive { background: #fef3c7; color: #b45309; }
.status-scheduled { background: #dbeafe; color: #1d4ed8; }
.status-cancelled { background: #fee2e2; color: #b91c1c; }

/* ---------- 按钮 ---------- */
/* 通用按钮：flex 居中对齐 + 圆角 + 轻投影，按下轻微下沉 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: .875rem;
    padding: 8px 16px;
    border-radius: 10px;
    transition: all .18s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 主按钮（靛蓝渐变）：添加/搜索/登录等主要操作 */
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, .35);
}
.btn-primary:hover { box-shadow: 0 4px 14px rgba(79, 70, 229, .45); transform: translateY(-1px); }

/* 成功按钮（绿色渐变）：导出/确认调整/完成标记 */
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, .35);
}
.btn-success:hover { box-shadow: 0 4px 14px rgba(16, 185, 129, .45); transform: translateY(-1px); }

/* 警告按钮（橙色渐变）：一键备份/请假记录 */
.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 158, 11, .35);
}
.btn-warning:hover { box-shadow: 0 4px 14px rgba(245, 158, 11, .45); transform: translateY(-1px); }

/* 危险按钮（红色渐变）：删除确认等破坏性操作 */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, .35);
}
.btn-danger:hover { box-shadow: 0 4px 14px rgba(239, 68, 68, .45); transform: translateY(-1px); }

/* 幽灵按钮：白底描边，用于次要/取消操作 */
.btn-ghost {
    background: #fff;
    color: var(--text-main);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.btn-ghost:hover { background: #f8fafc; border-color: #cbd5e1; }

/* 表格内图标按钮（编辑/删除/详情等小图标操作） */
.icon-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: .95rem;
    padding: 4px 7px;
    border-radius: 8px;
    transition: all .15s ease;
}
.icon-btn:hover { background: #eef2ff; transform: scale(1.1); }
/* 危险图标按钮（删除）悬停时用红色底 */
.icon-btn.text-danger:hover { background: #fee2e2; }

/* ---------- 输入控件 ---------- */
/* 统一表单控件样式：圆角描边输入框 + 聚焦主色光环 */
input[type="text"], input[type="number"], input[type="date"], input[type="time"],
input[type="email"], input[type="password"], select, textarea {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: .875rem;
    width: 100%;
    background: #fff;
    color: var(--text-main);
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* 聚焦态：主色边框 + 3px 柔光光环 */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
input::placeholder, textarea::placeholder { color: #94a3b8; }
select { cursor: pointer; }
/* 复选框使用主色 */
input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }

/* ---------- 弹窗 ---------- */
/* 全屏遮罩：默认隐藏；显示时由 app.js 移除 .hidden 并以 flex 居中内容 */
#modal {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: modal-fade .2s ease;
}
#modal:not(.hidden) { display: flex; }
#modal.hidden { display: none; }
/* 遮罩淡入动画 */
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

/* 弹窗面板：白色大圆角卡片 + 弹性弹出动画（cubic-bezier 回弹曲线） */
#modal .modal-panel {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
    width: 100%;
    max-width: 36rem;
    max-height: 90vh;
    overflow: auto;
    animation: modal-pop .25s cubic-bezier(.16, 1, .3, 1);
}
/* 弹出动画：从下方轻微缩放出现 */
@keyframes modal-pop {
    from { transform: scale(.95) translateY(12px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
/* 弹窗头部：浅灰→浅蓝渐变 + 底部细线分隔 */
#modal .modal-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border-radius: 20px 20px 0 0;
}
#modal .modal-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- 搜索/筛选卡片 ---------- */
/* 筛选栏：flex 换行排列，控件宽度自适应（最小 140px） */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.filter-bar input, .filter-bar select { width: auto; min-width: 140px; }

/* ---------- 分页 ---------- */
/* 分页按钮：白底描边圆角，悬停变主色，禁用置灰 */
.page-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text-main);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.page-btn:hover:not(:disabled) {
    background: var(--primary-bg);
    color: var(--primary);
    border-color: var(--primary-lighter);
}
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 登录页 ---------- */
/* 登录页容器：四色渐变背景 + 两个模糊光斑装饰（::before/::after），
   卡片本身毛玻璃（backdrop-filter），营造现代感 */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 35%, #ede9fe 70%, #fae8ff 100%);
    position: relative;
    overflow: hidden;
}
/* 装饰光斑基础样式：圆形 + 大面积模糊 + 半透明 */
.login-page::before, .login-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .45;
}
/* 右上紫色光斑 */
.login-page::before {
    width: 380px; height: 380px;
    background: linear-gradient(135deg, #818cf8, #c084fc);
    top: -120px; right: -100px;
}
/* 左下蓝色光斑 */
.login-page::after {
    width: 420px; height: 420px;
    background: linear-gradient(135deg, #93c5fd, #818cf8);
    bottom: -160px; left: -120px;
}
/* 登录卡片：半透明白 + 背景模糊，圆角大 + 主色柔光阴影 */
.login-card {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(79, 70, 229, .18);
    width: 100%;
    max-width: 420px;
    padding: 40px 36px;
    position: relative;
    z-index: 1;
    animation: modal-pop .4s cubic-bezier(.16, 1, .3, 1);
}
/* 登录 Logo：蓝紫渐变圆角方块 + 阴影 */
.login-logo {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #4f46e5, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 8px 20px rgba(79, 70, 229, .35);
}
/* 输入框容器：relative 定位以便前缀图标绝对定位 */
.login-input-wrap { position: relative; }
/* 输入框前缀图标：垂直居中于输入框左侧 */
.login-input-wrap .login-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}
/* 登录输入框：左侧预留 40px 给图标，更高更圆 */
.login-input-wrap input {
    padding-left: 40px;
    padding-right: 16px;
    height: 48px;
    border-radius: 12px;
    background: #fff;
}

/* ---------- 其他 ---------- */
/* 空列表提示文案（居中灰色） */
.empty-tip {
    text-align: center;
    color: var(--text-sub);
    padding: 24px 0;
    font-size: .9rem;
}
.footer-note { font-size: .75rem; color: var(--text-sub); }

/* 移动端侧边栏抽屉 */
/* 小于 md 断点（767px）时：侧边栏转为固定定位抽屉，带右阴影；
   显示/隐藏由 app.js toggleMobileMenu 切换 translateX 实现 */
@media (max-width: 767px) {
    #sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        width: 240px;
        box-shadow: 8px 0 30px rgba(15, 23, 42, .12);
        transform: translateX(0);
        transition: transform .25s ease;
    }
}

/* ============================================================
   视觉升级 v2.3.2 —— 精致化增强（叠加层，不破坏既有结构）
   要点：页面微渐变背景、卡片顶部渐变光条、表头主色线、
        键盘焦点态、登录页光斑动画、卡片入场动画
   ============================================================ */

/* ---------- 页面背景：纯色 → 极淡蓝紫渐变，提升空间层次 ---------- */
body {
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(99, 102, 241, .06), transparent 60%),
        radial-gradient(900px 420px at -10% 10%, rgba(139, 92, 246, .05), transparent 60%),
        var(--bg-page);
    background-attachment: fixed;
}

/* ---------- 顶栏：底部主色描边 + 顶部高光，增强品牌质感 ---------- */
.app-header {
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 2px 16px rgba(79, 70, 229, .28);
}
/* 顶栏标题图标与文字间距 */
.app-header .header-title i { margin-right: 2px; }

/* ---------- 卡片：顶部渐变光条装饰（position 定位在卡片顶端） ---------- */
.app-card {
    position: relative;
    overflow: hidden;
}
.app-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), transparent 85%);
    opacity: .85;
    pointer-events: none;
}
/* 统计卡片光条隐藏（避免干扰大数字区域） */
.app-card .card-icon ~ * { position: relative; }

/* ---------- 表格：表头底部主色细线，强化分组 ---------- */
.app-table thead th {
    border-bottom: 2px solid rgba(99, 102, 241, .18);
}

/* ---------- 键盘焦点可见性：鼠标与键盘操作双友好 ---------- */
.btn:focus-visible,
.page-btn:focus-visible,
.icon-btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--primary-lighter);
    outline-offset: 2px;
}

/* ---------- 文本选中配色（品牌色系） ---------- */
::selection {
    background: rgba(99, 102, 241, .22);
    color: var(--text-main);
}

/* ---------- 卡片入场动画（首屏轻微上浮淡入） ---------- */
@keyframes card-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.app-card:not(.hidden) {
    animation: card-rise .35s ease both;
}
/* 统计卡片延迟依次浮现（最多三个，错峰更灵动） */
.app-card:nth-child(2) { animation-delay: .05s; }
.app-card:nth-child(3) { animation-delay: .1s; }
.app-card:nth-child(4) { animation-delay: .15s; }

/* ---------- 登录页：光斑缓慢浮动 + 卡片悬浮反馈 ---------- */
@keyframes blob-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(24px, -18px) scale(1.06); }
}
@keyframes blob-drift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-20px, 14px) scale(1.05); }
}
.login-page::before { animation: blob-drift 14s ease-in-out infinite; }
.login-page::after { animation: blob-drift2 18s ease-in-out infinite; }
.login-card { transition: box-shadow .3s ease, transform .3s ease; }
.login-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 70px rgba(79, 70, 229, .24);
}

/* ---------- 空列表提示：加分隔线点缀，视觉不空洞 ---------- */
.empty-tip {
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .6);
}

/* ---------- 登录页演示账号提示条 ---------- */
/* 品牌色浅底 + 左侧图标 + 一键填入按钮，登录卡内表单下方展示 */
.demo-account-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #eef2ff, #ede9fe);
    border: 1px solid rgba(99, 102, 241, .25);
    border-radius: 14px;
}
.demo-account-tip .demo-tip-icon {
    color: var(--primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.demo-account-tip .demo-tip-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.demo-account-tip .demo-tip-title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .04em;
}
.demo-account-tip .demo-tip-text {
    font-size: .8rem;
    color: var(--text-main);
    white-space: nowrap;
}
.demo-account-tip .demo-fill-btn {
    flex-shrink: 0;
    border: 1px solid rgba(99, 102, 241, .35);
    background: #fff;
    color: var(--primary);
    font-size: .75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 9px;
    cursor: pointer;
    transition: all .15s ease;
}
.demo-account-tip .demo-fill-btn:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, .3);
}