/* ============================================
   完整的 Sticky Footer 解决方案
   ============================================ */

/* 1. 重置 HTML 和 BODY */
html {
    height: 100%;
    font-size: 14px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    /* ✅ 关键：Flexbox 布局 */
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* 2. 重置 Bootstrap 的 .footer 样式冲突 */
.footer {
    /* 移除 Bootstrap 的默认样式 */
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    /* 我们的 flex 布局 */
    flex-shrink: 0;
    flex-grow: 0;
    margin-top: auto;
    min-height: 40px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom: none;
}

/* 3. Header 样式 */
header {
    flex-shrink: 0;
    flex-grow: 0;
    height: 45px;
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
    border-top: none;
    position: relative;
}

/* 4. Main 内容区域 - 占据剩余空间 */
.main-content {
    flex: 1 1 auto;
    width: 100%;
    padding: 20px 0;
}

/* 5. 容器样式 */
.custom-container {
    width: 80%;
    margin: 0 auto;
}

/* 窄屏下固定 80% 会让内容过窄（后台侧边导航、多列表格尤其明显），
   小屏改为接近满宽，仅保留左右呼吸空间。 */
@media (max-width: 991.98px) {
    .custom-container {
        width: 92%;
    }
}

@media (max-width: 575.98px) {
    .custom-container {
        width: 96%;
    }
}

/* 6. Navbar 样式重置 */
.navbar {
    height: 100%;
    min-height: 45px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: center !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

.navbar .nav-link {
    line-height: 45px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 16px;
}

/* 7. 鼠标悬停效果 */
.nav-link-hover {
    transition: color 0.2s;
    position: relative;
    cursor: pointer;
}

.nav-link-hover:hover {
    color: #8a2be2;
}

.nav-link-hover[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 10;
    margin-right: 8px;
}

/* 8. 焦点状态样式（统一用品牌紫，替代此前的蓝色焦点环） */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(138, 43, 226, .35);
}

/* 9. Bootstrap container 调整 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

/* ============================================================
   设计令牌与通用组件（全站统一，简约路线）
   ------------------------------------------------------------
   背景：此前站点的配色、圆角、间距、卡片与页头样式都靠各视图内联
   <style> 各自重写（内联样式约 7900 行，公共 CSS 仅 1200 余行），
   同一套紫色变量在 20 多个页面里被复制粘贴，导致同一功能外观不一。
   这里把「已经成体系的那套紫色风格」集中定义一次，页面只需引用类名。
   取色遵循既有习惯：主色 #8a2be2 / 深色 #6f42c1 / 卡片 10-12px 圆角 /
   20px 卡片内距 / 极轻阴影，不引入新的视觉语言。
   ============================================================ */
:root {
    /* 品牌色 */
    --brand: #8a2be2;
    --brand-dark: #6f42c1;
    --brand-soft: #f6f0ff;
    --brand-border: #e3d5fb;
    --brand-gradient: linear-gradient(135deg, #8a2be2 0%, #6f42c1 100%);

    /* 文本与中性色 */
    --text: #2f2f38;
    --text-2: #6b6b76;
    --text-3: #9b9ba6;
    --border: #e9e9ef;
    --border-2: #f1f1f5;
    --bg: #f7f7fa;
    --surface: #ffffff;

    /* 功能色 */
    --ok: #2fa36b;
    --warn: #e8a33d;
    --danger: #dc3545;

    /* 圆角 / 阴影 */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(20, 20, 40, .05);
    --shadow: 0 2px 10px rgba(20, 20, 40, .06);
}

/* 页面底色统一为极浅灰，白卡片自然浮起（替代各页各自设 background） */
body {
    background-color: var(--bg);
    color: var(--text);
}

/* ---------- 页头 ---------- */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 16px;
}

.page-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    line-height: 1.4;
}

.page-sub {
    font-size: 13px;
    color: var(--text-2);
    margin: 4px 0 0;
}

/* ---------- 面包屑 ----------
   SEO 用途：列表页/专辑页/专辑汇总页原有页面没有可见面包屑，而结构化数据要求 BreadcrumbList
   与「页面上真实可见的导航路径」一致。这里补一个共用组件，避免各页各写一套字号与间距；
   颜色只用既有令牌（--text-2 / --text-3 / --brand），不引入新色值。 */
.crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--text-2);
    margin: 0 0 6px;
}

.crumb a {
    color: var(--text-2);
    text-decoration: none;
}

.crumb a:hover {
    color: var(--brand);
    text-decoration: underline;
}

.crumb__sep {
    color: var(--text-3);
}

.crumb__current {
    color: var(--text-3);
}

/* ---------- 卡片 ---------- */
.app-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.app-card + .app-card {
    margin-top: 16px;
}

.app-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-2);
    font-weight: 600;
    color: var(--text);
}

/* 需要强调时才用品牌渐变页头，不要每页都铺渐变 */
.app-card__head--brand {
    background: var(--brand-gradient);
    border-bottom: 0;
    color: #fff;
}

.app-card__body {
    padding: 18px;
}

/* ---------- 空状态 ---------- */
.empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-3);
}

.empty-state i {
    display: block;
    font-size: 30px;
    margin-bottom: 10px;
    opacity: .5;
}

.empty-state__text {
    font-size: 14px;
    margin: 0;
}

/* ---------- 表格滚动容器 ---------- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
}

/* ---------- 统计小卡 ---------- */
.stat-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
}

.stat-tile__label {
    font-size: 13px;
    color: var(--text-2);
    margin: 0 0 6px;
}

.stat-tile__value {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

/* ---------- 标签胶囊 ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 18px;
    border-radius: var(--radius-pill);
    background: var(--border-2);
    color: var(--text-2);
}

.chip--brand {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

/* ---------- 表单与文本辅助 ---------- */
.field-label {
    display: block;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 6px;
}

.form-hint {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 4px;
}

.loading-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-2);
}

.text-2 {
    color: var(--text-2);
}

.text-3 {
    color: var(--text-3);
}

.divider {
    height: 1px;
    background: var(--border-2);
    border: 0;
    margin: 16px 0;
}

/* ---------- 品牌按钮 ---------- */
.btn-brand {
    background-color: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.btn-brand:disabled {
    opacity: .6;
}

.btn-outline-brand {
    background: transparent;
    border: 1px solid var(--brand);
    color: var(--brand);
}

.btn-outline-brand:hover {
    background: var(--brand);
    color: #fff;
}

/* ============================================================
   Bootstrap 默认蓝 → 品牌紫
   Bootstrap 在 _Layout 中排在 site.css 之后，因此这里用提高一级的
   选择器（.btn.btn-primary）而不是 !important 来取得优先级，
   既统一了配色，又不依赖文件加载顺序。
   ============================================================ */
.btn.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
}

.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
    background-color: var(--brand);
    border-color: var(--brand);
    opacity: .6;
}

.btn.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.text-primary {
    color: var(--brand) !important;
}

.bg-primary {
    background-color: var(--brand) !important;
}

.link-primary {
    color: var(--brand) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-border);
    box-shadow: 0 0 0 .2rem rgba(138, 43, 226, .12);
}

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.pagination .page-link {
    color: var(--brand);
}

.pagination .page-link:hover {
    color: var(--brand-dark);
    background-color: var(--brand-soft);
}

.pagination .page-item.active .page-link {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.nav-pills .nav-link.active {
    background-color: var(--brand);
}

.alert-link {
    color: var(--brand-dark);
}

/* ============================================================
   超级管理后台侧边导航
   ------------------------------------------------------------
   原先这段样式在 8 个后台页面里各复制了一份（连同整块导航 HTML），
   现已抽成共享分部 _SuperAdminNav.cshtml，样式集中到这里。
   保留原有观感（白卡片 + 品牌渐变选中态），只把鼠标悬停时
   「文字右移 5px」的跳动效果改成朴素的底色变化，更符合简约路线。
   ============================================================ */
.sidebar-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.sidebar-menu .nav-link {
    display: flex;
    align-items: center;
    color: var(--text-2);
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-2);
    transition: background-color .2s, color .2s;
}

.sidebar-menu .nav-link:last-child {
    border-bottom: 0;
}

.sidebar-menu .nav-link:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

.sidebar-menu .nav-link.active {
    background: var(--brand-gradient);
    color: #fff;
}

.badge-unread {
    margin-left: auto;
    background: var(--danger);
    color: #fff;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    line-height: 16px;
}

/* 后台侧边导航在窄屏下改为横向可滑动，避免 8 个入口挤成竖排长条 */
@media (max-width: 767.98px) {
    .sidebar-menu {
        margin-bottom: 16px;
    }

    .sidebar-menu .nav {
        flex-direction: row;
        overflow-x: auto;
    }

    .sidebar-menu .nav-link {
        border-bottom: 0;
        border-right: 1px solid var(--border-2);
        white-space: nowrap;
    }
}

/* ============================================================
   首页紧凑化（头部 + 四个功能入口）
   ------------------------------------------------------------
   作用域：全部挂在首页根容器 .home-compact 下。
   首页「已登录 / 未登录」两种形态的最外层 div 都带这个类，
   站内其它页面即便用到 .page-head/.feature-card 也不受影响。

   为什么选择器都写成两级（.home-compact xxx）：
   首页原有的 .welcome-banner/.feature-card/.filter-* 等规则写在
   Views/Home/Index.cshtml 的 <style> 里，渲染在 <body> 内、位于本文件之后，
   同优先级时后者胜出；这里用「类 + 类」提高一级优先级来覆盖，
   既不改动那些既有规则，也不新增任何内联 <style>，更不用 !important。

   只收紧尺寸（padding / 字号 / 间距 / 控件高度），
   不改变任何筛选逻辑、筛选项含义与提交行为。
   ============================================================ */

/* ---------- 页头：标题、副标题与整体上下留白 ---------- */
.home-compact .page-head {
    margin: 0 0 10px;   /* 改前 0 0 16px */
    gap: 8px;           /* 改前 12px */
}

.home-compact .page-title {
    font-size: 18px;    /* 改前 20px */
    line-height: 1.3;   /* 改前 1.4 */
}

.home-compact .page-sub {
    font-size: 12px;    /* 改前 13px */
    margin-top: 2px;    /* 改前 4px */
}

/* ---------- 未登录页头：欢迎横幅 ---------- */
.home-compact .welcome-banner {
    padding: 30px 20px;      /* 改前 60px 20px */
    margin-bottom: 20px;     /* 改前 40px */
    border-radius: 0 0 10px 10px;
}

.home-compact .welcome-banner h1 {
    font-size: 1.6rem;       /* 改前 2.5rem */
    margin-bottom: 8px;      /* 改前 16px */
}

.home-compact .welcome-banner p {
    font-size: 0.95rem;      /* 改前 1.1rem */
    margin-bottom: 14px;     /* 改前 30px */
}

.home-compact .welcome-banner .btn-login,
.home-compact .welcome-banner .btn-register {
    padding: 7px 20px;       /* 改前 10px 30px */
    font-size: 0.88rem;      /* 改前 1rem */
    border-radius: 6px;
}

.home-compact .welcome-banner .btn-login {
    margin-right: 8px;       /* 改前 12px */
}

/* ---------- 四个功能入口：组建教案 / 学情分析 / 作业批改 / 资料管理 ---------- */
.home-compact .features-container {
    margin-bottom: 20px;     /* 改前 50px */
}

/* 卡片本体已改为 <a>，这里补掉链接默认下划线与配色，其余观感沿用既有 .feature-card */
.home-compact .feature-card {
    display: block;
    height: 100%;
    padding: 16px 12px;      /* 改前 30px 20px */
    border-radius: 10px;     /* 改前 12px */
    color: inherit;
    text-decoration: none;
}

.home-compact .feature-icon {
    width: 42px;             /* 改前 60px */
    height: 42px;            /* 改前 60px */
    margin: 0 auto 8px;      /* 改前 0 auto 20px */
    border-radius: 10px;     /* 改前 12px */
}

.home-compact .feature-icon i {
    font-size: 18px;         /* 改前 28px */
}

.home-compact .feature-card h3 {
    font-size: 0.95rem;      /* 改前 1.25rem */
    margin-bottom: 4px;      /* 改前 12px */
}

.home-compact .feature-card p {
    font-size: 0.8rem;       /* 改前 0.95rem */
    line-height: 1.4;        /* 改前 1.6 */
    /* 窄屏两列时不让长句挤出卡片、撑出横向滚动条 */
    overflow-wrap: anywhere;
}

/* ---------- 已登录页头的资料筛选区：整体压扁 ---------- */
.home-compact .filter-advanced-wrapper {
    margin-bottom: 18px;          /* 改前 32px */
}

.home-compact .filter-card {
    border-radius: 14px;          /* 改前 20px */
}

.home-compact .filter-card-header {
    padding: 12px 18px;           /* 改前 20px 24px */
}

.home-compact .filter-card-title {
    font-size: 0.98rem;           /* 改前 1.15rem */
    margin-bottom: 2px;           /* 改前 4px */
}

.home-compact .filter-card-title i {
    font-size: 1rem;              /* 改前 1.3rem */
}

.home-compact .filter-card-subtitle {
    font-size: 0.75rem;           /* 改前 0.8rem */
    padding-left: 24px;           /* 改前 32px */
}

.home-compact .filter-card-content {
    padding: 10px 16px;           /* 改前 16px 20px */
}

.home-compact .filter-row {
    gap: 8px;                     /* 改前 12px */
    margin-bottom: 6px;           /* 改前 10px */
    padding-bottom: 6px;          /* 改前 10px */
}

.home-compact .filter-label {
    font-size: 0.82rem;           /* 改前 0.9rem */
    min-width: 66px;              /* 改前 75px */
    padding-top: 0;               /* 改前 6px */
}

.home-compact .filter-label i {
    font-size: 0.85rem;           /* 改前 0.95rem */
    width: 18px;                  /* 改前 20px */
    height: 18px;                 /* 改前 20px */
}

.home-compact .filter-options {
    gap: 5px;                     /* 改前 6px */
}

.home-compact .filter-tag {
    padding: 4px 11px;            /* 改前 7px 14px */
    border-radius: 14px;          /* 改前 18px */
    border-width: 1px;            /* 改前 2px，仅收细描边，选中态样式不变 */
    font-size: 0.78rem;           /* 改前 0.82rem */
}

.home-compact .filter-search-section {
    gap: 8px;                     /* 改前 10px */
    margin-top: 8px;              /* 改前 12px */
    padding-top: 8px;             /* 改前 12px */
}

.home-compact .filter-search-icon {
    left: 11px;                   /* 改前 14px */
    font-size: 0.9rem;            /* 改前 1rem */
}

.home-compact .filter-search-input {
    padding: 8px 14px 8px 36px;   /* 改前 12px 18px 12px 44px */
    border-radius: 10px;          /* 改前 12px */
    font-size: 0.85rem;           /* 改前 0.9rem */
}

.home-compact .filter-search-btn {
    padding: 8px 18px;            /* 改前 12px 26px */
    border-radius: 10px;          /* 改前 12px */
    font-size: 0.85rem;           /* 改前 0.9rem */
}

.home-compact .filter-selection-hint {
    padding: 9px 16px;            /* 改前 16px 28px */
    font-size: 0.8rem;            /* 改前 0.85rem */
}

.home-compact .filter-loading {
    padding: 16px 24px;           /* 改前 24px 32px */
}

/* ---------- 窄屏：头部不重叠、四个入口两列换行、不产生横向滚动 ---------- */
@media (max-width: 767.98px) {
    .home-compact .welcome-banner {
        padding: 24px 14px;       /* 改前 40px 16px */
    }

    .home-compact .welcome-banner h1 {
        font-size: 1.4rem;        /* 改前 1.8rem */
    }

    .home-compact .filter-card-content {
        padding: 9px 12px;        /* 改前 20px */
    }

    .home-compact .filter-tag {
        padding: 6px 11px;        /* 改前 8px 16px */
        font-size: 0.76rem;       /* 改前 0.85rem */
    }

    /* 页头本就在窄屏自动换行（.page-head 的 flex-wrap），这里再压一档行距 */
    .home-compact .page-head {
        margin-bottom: 8px;
    }
}

@media (max-width: 575.98px) {
    .home-compact .welcome-banner {
        padding: 22px 12px;       /* 改前 40px 15px */
    }

    .home-compact .welcome-banner h1 {
        font-size: 1.35rem;       /* 改前 1.8rem */
    }

    .home-compact .feature-card {
        padding: 14px 10px;
    }

    .home-compact .feature-icon {
        width: 38px;
        height: 38px;
    }

    .home-compact .feature-icon i {
        font-size: 17px;
    }

    .home-compact .feature-card p {
        font-size: 0.76rem;
    }
}