/* ============================================================
   青云AI智能教务系统 · 青绿主题覆盖层（theme_qinglv）
   版本：v1.0 / 20260916
   设计来源：美化方案/系统UI美化设计稿.html + 青云AI_前端样式替换.css
   用法：在 /static/css/style.css 之后引入本文件覆盖旧样式
   红线：仅视觉层（色系/圆角/阴影/动效），不触碰任何业务逻辑与 DOM 结构
   ============================================================ */

/* ===== 1. 设计令牌覆盖（CSS 变量） =====
   原 :root 为蓝色系（--primary #2563eb / --accent #7c3aed），
   此处整体替换为设计稿青绿三阶色板。所有 var() 引用自动换肤。 */
:root {
    /* 主色系 - 青绿（设计稿 §2.1） */
    --primary: #2A8A7B;          /* 中青：按钮/激活/链接 */
    --primary-dark: #1F6F63;     /* 深青：渐变深端/hover */
    --primary-light: #3AA899;    /* 浅青：渐变浅端/头像渐变 */
    --accent: #3AA899;           /* 辅助青（原紫蓝，改为浅青统一青绿） */
    --accent-light: #5CB8A8;     /* 浅辅助青 */

    /* 背景 */
    --bg-warm: #F0F5F4;          /* 页面浅薄荷绿背景（原 #f8fafc） */
    --bg-card: #ffffff;
    --bg-card-gradient: linear-gradient(145deg, #ffffff 0%, #f7fbfa 100%);
    --bg-hover: #F8FBFA;
    --bg-input: #FAFCFC;

    /* 边框 */
    --border: #DCE8E6;           /* 青绿系浅边框（原 #e2e8f0） */

    /* 阴影（设计稿 §2.3：青绿半透明） */
    --shadow-sm: 0 2px 8px rgba(31, 111, 99, 0.04);
    --shadow-md: 0 6px 20px rgba(31, 111, 99, 0.08);
    --shadow-lg: 0 12px 28px rgba(31, 111, 99, 0.12);
    --shadow-brand: 0 4px 12px rgba(42, 138, 123, 0.3);

    /* 圆角（设计稿 §2.2） */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 16px;

    /* 过渡（设计稿 §3 流畅手感，保留原 cubic-bezier） */
    --transition-fast: all 0.2s ease;
    --transition-base: all 0.25s ease;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 2. 全局背景 ===== */
body {
    background: var(--bg-warm);
}

/* ===== 3. 侧边栏（设计稿 §4.1：深蓝→青绿垂直渐变） ===== */
.sidebar {
    background: linear-gradient(180deg, #1F6F63 0%, #2A8A7B 100%);
}
.sidebar-logo-icon {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.18);
}
.sidebar-logo-text span {
    color: rgba(255, 255, 255, 0.72);
}
.nav-section-title {
    color: rgba(255, 255, 255, 0.55);
}
.nav-item {
    color: rgba(255, 255, 255, 0.82);
}
.nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding-left: 18px;
}
.nav-item.active {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #ffffff;
}
.nav-item .nav-badge {
    background: #ffffff;
    color: #1F6F63;
}
.sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.12);
}
.sidebar-footer-info {
    color: rgba(255, 255, 255, 0.55);
}

/* ===== 4. 顶部栏（设计稿 §4.2：白底、青绿账号区） ===== */
.topbar {
    background: rgba(255, 255, 255, 0.94);
    border-bottom-color: #E8F0EF;
}
.page-title::before {
    background: linear-gradient(180deg, #2A8A7B, #3AA899);
}
.breadcrumb a:hover {
    color: var(--primary);
}
.student-selector {
    background: #ffffff;
    border-color: #DCE8E6;
}
.student-selector:hover {
    border-color: #2A8A7B;
    box-shadow: 0 2px 12px rgba(42, 138, 123, 0.12);
    background: rgba(255, 255, 255, 0.95);
}
.user-avatar {
    background: linear-gradient(135deg, #2A8A7B, #3AA899);
    border-radius: 50%;
}
.user-name {
    color: #2A8A7B;
}
.logout-btn {
    border-color: #DCE8E6;
    color: #475569;
}
.logout-btn:hover {
    background: rgba(254, 242, 242, 0.8);
    border-color: rgba(254, 202, 202, 0.8);
    color: #dc2626;
}

/* ===== 5. 通用卡片/面板（青绿描边 + 柔和阴影） ===== */
.stat-card,
.chart-card,
.student-card,
.panel,
.upload-zone,
.dash-card,
.qk-modal,
.modal,
.modal-content {
    border: 1px solid rgba(42, 138, 123, 0.10);
}
.stat-card:hover,
.chart-card:hover,
.student-card:hover {
    box-shadow: 0 12px 28px rgba(31, 111, 99, 0.12);
}

/* 统计卡：去掉顶部装饰线（设计稿 §4.3：禁止顶部装饰线） */
.stat-card::before,
.stat-card::after {
    display: none;
}

/* ===== 6. 按钮（设计稿 §4.5：青绿主按钮、hover 加深上浮） ===== */
.btn-primary {
    background: linear-gradient(135deg, #2A8A7B 0%, #3AA899 100%);
}
.btn-primary::after {
    background: linear-gradient(135deg, #1F6F63 0%, #2A8A7B 100%);
}
.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(42, 138, 123, 0.3);
    transform: translateY(-1px);
}
.btn-secondary {
    border-color: #2A8A7B;
    color: #2A8A7B;
}
.btn-secondary::before {
    background: linear-gradient(135deg, rgba(42, 138, 123, 0.06), rgba(58, 168, 153, 0.03));
}
.btn-sm:hover {
    border-color: #2A8A7B;
    color: #2A8A7B;
}
.quick-btn:hover,
.qf-btn:hover,
.pk-btn:hover {
    border-color: rgba(42, 138, 123, 0.45);
    color: #2A8A7B;
}

/* ===== 7. 首页驾驶舱（原 #165DFF 新蓝系 → 青绿） ===== */
.home-dash {
    background: #F0F5F4;
}
.dash-page-title {
    color: #1F2D3D;
}
.stat-card {
    background: linear-gradient(145deg, #ffffff 0%, #f7fbfa 100%);
    box-shadow: 0 2px 8px rgba(31, 111, 99, 0.05);
}
.stat-card:hover {
    box-shadow: 0 12px 28px rgba(31, 111, 99, 0.14);
    transform: translateY(-4px);
}
.stat-set:hover {
    background: #E8F5F3;
    color: #2A8A7B;
}
.stat-icbtn {
    background: #E8F5F3;
}
.stat-icbtn i {
    color: #2A8A7B;
}
.dash-card {
    background: linear-gradient(145deg, #ffffff 0%, #f7fbfa 100%);
    box-shadow: 0 2px 8px rgba(31, 111, 99, 0.06);
}
.dash-card-title {
    color: #1F2D3D;
}
.dash-bind > i {
    color: #2A8A7B;
}
.dash-bind .bind-btn {
    background: #2A8A7B;
    box-shadow: 0 4px 14px rgba(42, 138, 123, 0.30);
}
.dash-bind .bind-btn:hover {
    background: #1F6F63;
}

/* 日历（驾驶舱） */
.cal-nav button:hover {
    border-color: #2A8A7B;
    color: #2A8A7B;
    background: #E8F5F3;
}
.cal-cell:hover:not(.blank) {
    outline-color: rgba(42, 138, 123, 0.45);
}
.cal-cell.today::after {
    background: #2A8A7B;
}
.cal-cell.lv1 {
    background: linear-gradient(135deg, #EBF7F4 0%, #E0F1ED 100%);
    color: #2A8A7B;
}
.cal-cell.lv2 {
    background: linear-gradient(135deg, rgba(42, 138, 123, 0.42) 0%, rgba(42, 138, 123, 0.55) 100%);
}
.cal-cell.lv3 {
    background: linear-gradient(135deg, #23816F 0%, #2A8A7B 100%);
}
.cal-cell.sel {
    background: linear-gradient(135deg, #2A8A7B 0%, #1F6F63 100%) !important;
    box-shadow: 0 0 0 3px rgba(42, 138, 123, 0.26), 0 4px 12px rgba(42, 138, 123, 0.22) !important;
}
.day-time {
    color: #2A8A7B;
}
.day-row:hover {
    background: #F5FAF9;
}

/* 待办 */
.todo-ic {
    color: #2A8A7B;
}
.todo-tag.blue,
.todo-badge {
    background: #E8F5F3;
    color: #2A8A7B;
}
.todo-row:hover .todo-head {
    background: #F5FAF9;
}

/* 快捷操作栏 */
.qf-btn i {
    color: #2A8A7B;
}
.qf-btn:hover {
    border-color: rgba(42, 138, 123, 0.45);
    color: #2A8A7B;
    box-shadow: 0 4px 14px rgba(42, 138, 123, 0.14);
}
.qf-btn.primary {
    background: #2A8A7B;
    border-color: #2A8A7B;
}
.qf-btn.primary:hover {
    background: #1F6F63;
    color: #fff;
    box-shadow: 0 4px 14px rgba(42, 138, 123, 0.32);
}
.quick-btn.primary {
    background: #2A8A7B;
    border-color: #2A8A7B;
}
.quick-btn.primary:hover {
    background: #1F6F63;
}

/* ===== 8. 快捷栏弹窗 / 统计卡弹窗（qk/st/brk 原 #165DFF 系） ===== */
.qk-ok,
.qk-cfm-ok {
    background: #2A8A7B;
}
.qk-ok:hover,
.qk-cfm-ok:hover {
    background: #1F6F63;
}
.qk-row input:focus,
.qk-row select:focus {
    border-color: #2A8A7B;
    box-shadow: 0 0 0 2px rgba(42, 138, 123, 0.12);
}
.qk-stu-grade {
    color: #2A8A7B;
    background: #E8F5F3;
}
.qk-stu-card:hover {
    border-color: rgba(42, 138, 123, 0.45);
}
.qk-cfm-title {
    color: #1F6F63;
    background: #E8F5F3;
    border-bottom-color: #D6EBE6;
}
.qk-cfm-ok:disabled,
.qk-ok:disabled {
    background: #9FCFC5;
}
.qk-price-hint {
    background: #E8F5F3;
    color: #1F6F63;
}
.st-pre-btn:hover {
    border-color: #2A8A7B;
    color: #2A8A7B;
}
.st-pre-btn.on {
    background: linear-gradient(135deg, #2A8A7B, #1F6F63);
    box-shadow: 0 4px 10px rgba(42, 138, 123, 0.28);
}
.st-cat-all:hover {
    border-color: #2A8A7B !important;
    color: #2A8A7B !important;
}
.brk-campus i {
    color: #2A8A7B;
}
.brk-val,
.brk-total b,
.brk-c4 {
    color: #1F6F63;
}
.brk-item:hover {
    border-color: #B8DCD4;
    box-shadow: 0 2px 10px rgba(42, 138, 123, 0.08);
}
.brk-bar span {
    background: linear-gradient(90deg, #2A8A7B, #1F6F63);
}
.day-camp {
    background: #E8F5F3;
    color: #1F6F63;
}

/* ===== 9. 测评 tab / 青云内嵌弹窗 / 学员档案 360 ===== */
.assess-tab:hover {
    border-color: #2A8A7B;
    color: #2A8A7B;
}
.assess-tab.active {
    background: linear-gradient(135deg, #2A8A7B, #1F6F63);
    box-shadow: 0 6px 16px rgba(42, 138, 123, 0.30);
}
.qye-head {
    background: linear-gradient(90deg, #1F6F63, #2A8A7B);
}
.sp-grade {
    color: #2A8A7B;
    background: #E8F5F3;
}
.sp-sec-title i {
    color: #2A8A7B;
}
.lnk {
    color: #2A8A7B;
    border-bottom-color: rgba(42, 138, 123, 0.4);
}
.lnk:hover {
    color: #1F6F63;
}
.sp-pg-btn {
    color: #2A8A7B;
}
.sp-pg-btn:hover:not([disabled]) {
    background: #F0F8F6;
}
.qk-stu-profile {
    border-color: #B8DCD4;
    background: #E8F5F3;
    color: #1F6F63;
}
.qk-stu-profile:hover {
    background: #2A8A7B;
    border-color: #2A8A7B;
    color: #fff;
}

/* ===== 10. 单词测评（wa-* 原 #165DFF 系） ===== */
.wa-quiz-progress-fill {
    background: #2A8A7B;
}
.wa-quiz-progress-txt b {
    color: #2A8A7B;
}
.wa-quiz-dir {
    background: #E8F5F3;
    color: #2A8A7B;
}
.wa-opt-btn:hover {
    border-color: rgba(42, 138, 123, 0.45);
    color: #2A8A7B;
    box-shadow: 0 2px 12px rgba(42, 138, 123, 0.10);
}
.wa-opt-btn.picked {
    border-color: #2A8A7B;
    background: #F0F8F6;
    color: #2A8A7B;
}
.wa-opt-btn.picked .wa-opt-label {
    background: #2A8A7B;
}
.wa-quiz-prev:hover:not(:disabled),
.wa-quiz-next:hover:not(:disabled) {
    border-color: #2A8A7B;
    color: #2A8A7B;
}
.wa-jump-dot.done {
    background: #2A8A7B;
}
.wa-jump-dot.cur {
    outline-color: rgba(42, 138, 123, 0.45);
    background: #2A8A7B;
}

/* ===== 11. 首页快捷表单下拉 ===== */
.qk-combo-opt:hover {
    background: #F2F9F7;
}

/* ===== 12. 试卷工作台（pw-*）与题库上传（qbu-*） ===== */
.pw-toolbar,
.pw-student-bar {
    border-color: rgba(42, 138, 123, 0.12);
}
.pw-title-input:focus {
    border-color: #2A8A7B;
    box-shadow: 0 0 0 3px rgba(42, 138, 123, 0.10);
}
.pw-sec-title {
    color: #1F6F63;
    border-bottom-color: #1F6F63;
}
.pw-q-tools button:hover {
    border-color: #2A8A7B;
    color: #2A8A7B;
    background: #F0F8F6;
}
.pw-stu-opt:hover,
.pw-stu-opt.active {
    background: #EEF7F4;
}
.pw-pool-item:hover {
    border-color: #3AA899;
    box-shadow: 0 2px 8px rgba(42, 138, 123, 0.08);
}
.pw-tag {
    background: rgba(42, 138, 123, 0.08);
    color: #2A8A7B;
}
.pw-drag-over {
    border-color: #2A8A7B !important;
    background: rgba(42, 138, 123, 0.06) !important;
}
.pw-smart-head {
    background: linear-gradient(135deg, #EEF7F4, #F7FBF9);
}
.pw-smart-head i {
    color: #2A8A7B;
}
.pw-smart-quick a {
    color: #2A8A7B;
    background: #EEF7F4;
}
.pw-smart-dist-item b {
    color: #2A8A7B;
}
.pw-smart-dist-item i {
    background: #2A8A7B;
}
.pwb-row:hover {
    background: #F5FAF9;
}
.pwb-tag-t {
    background: #F0F7F5;
    color: #1F6F63;
}
.pwb-pts i {
    color: #2A8A7B;
}
.pwb-count {
    color: #2A8A7B;
}
.pw-btn-word {
    color: #1F6F63;
    border-color: #BFDFD7;
    background: #EFF8F5;
}
.pw-btn-word:hover {
    background: #DFF1EC;
}
.pw-pigai-banner {
    background: linear-gradient(135deg, #1F6F63 0%, #2A8A7B 55%, #3AA899 100%);
    box-shadow: 0 6px 20px rgba(31, 111, 99, 0.35);
}
.qbu-card-top i {
    color: #2A8A7B;
}
.qbu-bar-fill {
    background: linear-gradient(90deg, #2A8A7B, #34d399);
}
.qbu-ctrl-tip i {
    color: #2A8A7B;
}

/* ===== 13. 校区 PK / 学情报告 / 知识点等（走 var(--primary) 已自动） ===== */
.pk-sum-ic {
    background: #E8F5F3;
    color: var(--primary);
}
.pk-table tbody tr:hover td {
    background: #F5FAF9;
}

/* ===== 14. 空状态 / 上传区 / 表单焦点（设计稿 §4.6/§4.7） ===== */
.upload-zone {
    border-color: #B8D8D3;
}
.upload-zone:hover {
    border-color: #2A8A7B;
    background: #F0F5F4;
}
.placeholder-icon {
    background: #E8F5F3;
    color: #2A8A7B;
}
.form-input:focus {
    border-color: #2A8A7B;
    box-shadow: 0 0 0 4px rgba(42, 138, 123, 0.08), 0 2px 12px rgba(42, 138, 123, 0.06);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-color: rgba(42, 138, 123, 0.28);
}

/* ===== 15. 滚动条美化（设计稿 §7 验收第 9 条：细条青绿半透明） ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(42, 138, 123, 0.20);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(42, 138, 123, 0.40);
}

/* ============================================================
   缺失前缀类补齐（comp-/qa-/ct-/sv-/qr-记账）
   这些类在 style.css 中零定义，JS 以"类名 + 内联样式"混用。
   此处补充内联样式未覆盖的视觉统一（背景/hover/间距），
   不改变内联已定死的边框色（内联优先级更高，安全）。
   ============================================================ */

/* ---------- comp-* 计费组件编辑器（finance.js renderComponentRow） ---------- */
.comp-row {
    background: #FAFCFC;
    border-radius: 6px;
    margin-bottom: 6px;
    padding: 4px 8px 4px 10px;
    transition: background 0.2s ease;
}
.comp-row:hover {
    background: #F2F9F7;
}
.comp-row input,
.comp-row select {
    border-radius: 5px;
    transition: border-color 0.2s ease;
}
.comp-row input:focus,
.comp-row select:focus {
    outline: none;
    border-color: #2A8A7B !important;
}
.comp-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

/* ---------- qa-* 工资快速调整（finance.js renderQuickAdjItems） ---------- */
.qa-item {
    transition: border-color 0.2s ease, background 0.2s ease;
}
.qa-item:hover {
    background: #F8FBFA;
}
.qa-item select:focus,
.qa-item input:focus {
    outline: none;
    border-color: #2A8A7B;
}

/* ---------- ct-* 课次类型编辑（finance.js addGradeBlock / addCourseType） ---------- */
.ct-block {
    transition: border-color 0.2s ease, background 0.2s ease;
    background: #FBFFFE;
}
.ct-block:hover {
    border-color: #BFDFD7 !important;
    background: #F7FBFA;
}
.ct-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ---------- sv-* 表格核验遮罩（misc.js 核验面板） ---------- */
.sv-cat {
    margin-bottom: 4px;
}
.sv-item:hover td {
    background: #F5FAF9;
}

/* ---------- qr-* 记账弹窗（finance.js 逐条录入） ----------
   注：#qrOverlay/.qr-sheet 容器 HTML 曾作为死代码删除但 JS 已恢复；
   此处补充类样式，待容器重建后即生效（仅视觉层）。 */
.qr-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.qr-card:hover {
    border-color: rgba(42, 138, 123, 0.35);
    box-shadow: 0 2px 8px rgba(31, 111, 99, 0.06);
}
.qr-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.qr-card-idx {
    font-size: 13px;
    font-weight: 700;
    color: #1F2D3D;
}
.qr-card-type {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.qr-card-del {
    padding: 4px 10px;
    border: none;
    background: #FDEBEB;
    color: #C33;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
}
.qr-card-del:hover {
    background: #FADCDC;
}
.qr-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 6px;
}
.qr-cfield label {
    display: block;
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}
.qr-cfield input,
.qr-cfield select {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #1F2D3D;
    transition: border-color 0.2s ease;
}
.qr-cfield input:focus,
.qr-cfield select:focus {
    outline: none;
    border-color: #2A8A7B;
}
.qr-card-img label {
    display: block;
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}
.qr-image-row {
    display: flex;
    gap: 6px;
}
.qr-image-btn {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #FAFCFC;
    color: #475569;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}
.qr-image-btn:hover {
    border-color: #2A8A7B;
    color: #2A8A7B;
    background: #F0F8F6;
}
.qr-image-preview {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.qr-image-preview img {
    max-height: 64px;
    border-radius: 6px;
    border: 1px solid var(--border);
}
.qr-cards-sub {
    font-size: 12px;
    color: #86909C;
}

/* ---------- 连带缺失辅助类 .seg（收支切换）/ .del（删除） ---------- */
.seg {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}
.seg:hover {
    border-color: #2A8A7B;
    color: #2A8A7B;
}
.seg.active {
    background: #2A8A7B;
    border-color: #2A8A7B;
    color: #fff;
}
.seg.income.active {
    background: #2A8A7B;
    border-color: #2A8A7B;
    color: #fff;
}
.seg.expense.active {
    background: #E8533F;
    border-color: #E8533F;
    color: #fff;
}
.del {
    padding: 2px 8px;
    border: none;
    background: #FDEBEB;
    color: #C33;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
}
.del:hover {
    background: #FADCDC;
}

/* ---------- components-area / grade-key（提成编辑器内） ---------- */
.components-area {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}
.grade-key {
    border-radius: 6px;
}