/* ──────────────────────────────────────────────────────────
   school.css  ——  加载于 Bootstrap 主题之后，保持原有类可用
   ────────────────────────────────────────────────────────── */

:root {
    --bg: #f5f7fb;
    --card-bg: #ffffff;
    --primary: #2f6fed;
    --primary-dark: #2458bd;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
}

/* ── 页面内容主区域 ── */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    background: var(--bg);
    color: var(--text);
}

/* ── Card ── */
.card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07) !important;
    margin-bottom: 0;
}
.card-pad { padding: 24px; }

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
    font-size: .95rem;
    padding: 9px 18px;
    text-decoration: none;
}
.btn-primary {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.btn-primary:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
.btn-muted {
    background: #eef2ff !important;
    color: var(--primary-dark) !important;
    border-color: #d6e4ff !important;
}
.btn-muted:hover { background: #dce9ff !important; }
.btn-light {
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.28) !important;
}

/* ── Form inputs ── */
.input, input.input, select.input, textarea.input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 1rem;
    outline: none;
    background: #fff;
    color: var(--text);
    transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,111,237,.12); }

/* ── Grid helpers ── */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ── KV list ── */
.list { display: grid; gap: 10px; }
.kv {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
}
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); font-size: .95rem; }

/* ── Section title ── */
.section-title { margin: 0 0 16px; font-size: 1.2rem; font-weight: 700; }

/* ── Muted ── */
.muted { color: var(--muted); }

/* ── Hero ── */
.hero {
    padding: 28px;
    color: white;
    border-radius: 14px;
}
.hero h1, .hero h2, .hero h3, .hero p { margin: 0; color: white; }
.hero p { opacity: .9; margin-top: 8px; }

/* 覆盖 .card 的 !important background，让英雄卡片渐变生效 */
.card.hero {
    border: none !important;
    color: #fff;
}
.hero-blue {
    background: linear-gradient(135deg, #2356c7 0%, #4f8cff 100%) !important;
    box-shadow: 0 8px 32px rgba(47,111,237,.40), 0 2px 10px rgba(47,111,237,.22) !important;
}
.hero-green {
    background: linear-gradient(135deg, #047857 0%, #34d399 100%) !important;
    box-shadow: 0 8px 32px rgba(5,150,105,.40), 0 2px 10px rgba(5,150,105,.22) !important;
}
.hero-purple {
    background: linear-gradient(135deg, #6d28d9 0%, #a855f7 100%) !important;
    box-shadow: 0 8px 32px rgba(109,40,217,.40), 0 2px 10px rgba(109,40,217,.22) !important;
}

/* ── Django messages → alert ── */
.messages-list { margin-bottom: 16px; }
.message {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    margin-bottom: 8px;
    font-size: .9rem;
}
.message.success, .message.messages-success { border-color: rgba(22,163,74,.3); background: #f0fdf4; color: #166534; }
.message.error,   .message.messages-error   { border-color: rgba(220,38,38,.2);  background: #fef2f2; color: #991b1b; }
.message.warning, .message.messages-warning { border-color: rgba(217,119,6,.2);  background: #fffbeb; color: #92400e; }
.message.info,    .message.messages-info    { border-color: rgba(37,99,235,.2);  background: #eff6ff; color: #1d4ed8; }

/* ── Actions/cards section ── */
.actions { display: grid; gap: 12px; }
.action-item {
    padding: 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--border);
}
.action-item strong { display: block; margin-bottom: 4px; }

/* ── Badge ── */
.badge-school {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .8rem;
    background: #eef2ff;
    color: var(--primary-dark);
}

/* ── Form group ── */
.form-group { margin-bottom: 16px; }
.label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .85rem; }

/* ── Page layout adjustments ── */
.page-content { padding: 20px; }
.page main { padding-bottom: 60px; }

/* ── 修复顶部固定导航栏遮住内容的问题 ── */
.page > main {
    /* Bootstrap 模板的顶部 navbar 高度约 56px，留出空间 */
    padding-top: 70px;
}

/* ── Sidebar active state ── */
.side-navbar .sidebar-item .sidebar-link.active {
    background: rgba(47,111,237,.15);
    color: var(--primary) !important;
}

/* ── Sidebar drag indicator ── */
.sidebar-dragging { opacity: .5; }
.sidebar-drag-over { outline: 2px dashed rgba(255,255,255,.5); border-radius: 4px; }

/* ── Table styles (keep from original) ── */
table { font-size: .975rem; }

/* ── Danger button ── */
.btn-danger-soft {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
}
.btn-danger-soft:hover { background: #fecaca; }

/* ── Login/Register page ── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1e3a5f 0%, #2f6fed 60%, #5b8cff 100%);
}
.auth-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.2);
    padding: 40px;
    max-width: 480px;
    width: 100%;
    margin: auto;
}
.auth-card h1 { font-size: 1.6rem; font-weight: 700; color: var(--text); }
.auth-card .auth-subtitle { color: var(--muted); font-size: .9rem; margin-bottom: 28px; }

/* Input material style (floating label) */
.input-material-group {
    position: relative;
    margin-bottom: 20px;
}
.input-material {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--border);
    border-radius: 0;
    padding: 12px 0 8px;
    font-size: .95rem;
    background: transparent;
    outline: none;
    transition: border-color .2s;
}
.input-material:focus { border-bottom-color: var(--primary); }
.label-material {
    position: absolute;
    top: 12px;
    left: 0;
    font-size: .9rem;
    color: var(--muted);
    transition: .2s ease;
    pointer-events: none;
}
.input-material:focus ~ .label-material,
.input-material:not(:placeholder-shown) ~ .label-material {
    top: -6px;
    font-size: .75rem;
    color: var(--primary);
}

/* ── Responsive: sidebar on mobile ── */
@media (max-width: 768px) {
    .page main .container-fluid { padding: 12px; }
    .card-pad { padding: 16px; }
    .kv { grid-template-columns: 120px 1fr; }
}

/* ── Mobile sidebar backdrop (replaces CSS ::after) ── */
.side-navbar.show-sm::after { display: none !important; }
/* 移动端展开时还原为左对齐（原模板对 <1200px 设了 text-align:center） */
.side-navbar.show-sm { text-align: left !important; }
#sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 997;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
#sidebar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* ── 汉堡菜单：仅在侧边栏自动折叠后（<1200px）显示 ── */
#toggle-btn { display: none !important; }
@media (max-width: 1199.98px) {
    #toggle-btn { display: flex !important; }
}

/* ── Dashboard responsive layout ── */
.dash-main-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 2fr;
    align-items: stretch;
}
.dash-bottom-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}
/* overflow-x: auto 需要容器本身有约束宽度才能生效；min-width:0 防止 flex/grid 子项撑开 */
.dash-stats-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
}
.dash-stats-scroll::-webkit-scrollbar { display: none; }

@media (max-width: 767.98px) {
    .dash-main-grid { grid-template-columns: 1fr; }
    .dash-bottom-grid { grid-template-columns: 1fr; }
    /* 用固定 width 而非 min-width，避免撑开父容器造成页面横向溢出 */
    .dash-stats-inner { width: 520px; }
}

/* ── Overwrite Bootstrap alert for Django messages ── */
.alert { border-radius: 10px; }

/* ── 侧边栏浅色主题（覆盖 Bootstrap 模板的深色 #393836） ── */
.side-navbar,
.side-navbar-inner {
    background: #e8e9ec !important;
    color: var(--text) !important;
    border-right: 1px solid #d4d6db;
}
.side-navbar .sidebar-header {
    background: #dddfe4 !important;
    border-bottom: 1px solid #d0d2d8;
}
/* heading 标签（常用功能 / 常用入口） */
.side-navbar .heading {
    color: var(--muted) !important;
    display: block !important;
    text-align: left !important;
}
/* 所有侧边栏链接 */
.sidebar-link {
    color: var(--text) !important;
    font-weight: 500;
}
.sidebar-link:hover,
.sidebar-link[aria-expanded="true"],
.sidebar-link[aria-expanded="aria-expanded"] {
    background: rgba(47,111,237,.12) !important;
    color: var(--primary) !important;
}
/* 折叠箭头换成深色版本 */
.sidebar-link[data-bs-toggle=collapse]::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%236b7280' stroke-miterlimit='10' stroke-width='5' d='M39 20L25 32l14 12' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
/* 激活状态 */
.side-navbar .sidebar-item .sidebar-link.active,
.sidebar-item.active > .sidebar-link {
    background: rgba(47,111,237,.15) !important;
    color: var(--primary) !important;
    font-weight: 600;
}
/* SVG 图标在浅色背景下变为深色 */
.side-navbar .svg-icon {
    filter: invert(35%) sepia(0%) saturate(0%) brightness(60%);
}
.side-navbar .sidebar-link:hover .svg-icon,
.side-navbar .sidebar-link.active .svg-icon,
.side-navbar .sidebar-link[aria-expanded="true"] .svg-icon {
    filter: invert(30%) sepia(80%) saturate(400%) hue-rotate(200deg) brightness(90%);
}
/* 折叠子菜单背景 + 消除原主题 2px 绿色 border-left（粗线来源） */
.side-navbar .sidebar-item .collapse,
.side-navbar .sidebar-item .collapsing {
    background: transparent !important;
    border-left: none !important;
}
.side-navbar .sidebar-item .collapse li,
.side-navbar .sidebar-item .collapsing li {
    background: transparent !important;
    color: var(--text) !important;
}
.side-navbar .sidebar-item li a,
.side-navbar .sidebar-item .collapse .sidebar-link,
.side-navbar .sidebar-item .collapsing .sidebar-link {
    color: var(--text) !important;
    background: transparent !important;
}
.side-navbar .sidebar-item .collapse .sidebar-link:hover,
.side-navbar .sidebar-item .collapsing .sidebar-link:hover {
    background: rgba(47,111,237,.12) !important;
    color: var(--primary) !important;
}
/* 拖拽指示线改为深色 */
.sidebar-drag-over { outline: 2px dashed rgba(47,111,237,.5) !important; }
/* hr 分割线 */
.side-navbar hr { border-color: rgba(0,0,0,.1) !important; }

/* ── 顶部 Navbar 换浅色主题 ── */
nav.navbar {
    background: #e8e9ec !important;
    box-shadow: 0 1px 0 #d4d6db;
    display: flex !important;
    align-items: center !important;
}
/* navbar 内所有文字改为深色 */
nav.navbar .nav-link,
nav.navbar .nav-link.text-white,
nav.navbar .text-white {
    color: var(--text) !important;
}
nav.navbar .nav-link:hover { color: var(--primary) !important; }
/* 隐藏 Bootstrap 默认 dropdown 箭头伪元素（已用内联 SVG 替代） */
nav.navbar .dropdown-toggle { color: var(--text) !important; }
nav.navbar .dropdown-toggle::after,
nav.navbar .dropdown-toggle::before { display: none !important; }

/* 语言下拉菜单：圆角、无选中底色 */
.lang-dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
    padding: 6px !important;
    min-width: 140px;
}
.lang-dropdown-menu .dropdown-item {
    border-radius: 8px !important;
    color: var(--text) !important;
    background: transparent !important;
    padding: 8px 12px;
}
.lang-dropdown-menu .dropdown-item:hover,
.lang-dropdown-menu .dropdown-item:focus {
    background: rgba(47,111,237,.08) !important;
    color: var(--primary) !important;
}
.lang-dropdown-menu .dropdown-item.active,
.lang-dropdown-menu .dropdown-item:active {
    background: transparent !important;
    color: var(--text) !important;
}
/* toggle 汉堡菜单图标 */
nav.navbar .menu-btn { color: var(--text) !important; }
nav.navbar .menu-btn .svg-icon {
    filter: invert(20%) sepia(0%) brightness(40%);
}

/* ── 齿轮设置下拉菜单：圆角、无选中底色（与语言菜单保持一致） ── */
.settings-dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
    padding: 6px !important;
    min-width: 200px;
}
.settings-dropdown-menu .dropdown-item {
    border-radius: 8px !important;
    color: var(--text) !important;
    background: transparent !important;
    padding: 8px 12px;
}
.settings-dropdown-menu .dropdown-item:hover,
.settings-dropdown-menu .dropdown-item:focus {
    background: rgba(47,111,237,.08) !important;
    color: var(--primary) !important;
}
.settings-dropdown-menu .dropdown-item.active,
.settings-dropdown-menu .dropdown-item:active {
    background: transparent !important;
    color: var(--text) !important;
}

/* ── 侧边栏菜单项高度统一 ── */
/* 一级链接 */
.side-navbar .sidebar-link {
    padding: 10px 16px !important;
    line-height: 1.4 !important;
    min-height: unset !important;
}
/* 二级链接（折叠内） */
.side-navbar .sidebar-item .collapse .sidebar-link,
.side-navbar .sidebar-item .collapsing .sidebar-link {
    padding: 8px 16px 8px 44px !important;
    line-height: 1.4 !important;
}
/* heading 行高统一 */
.side-navbar .heading {
    padding: 6px 16px 4px !important;
    font-size: .72rem !important;
    line-height: 1.2 !important;
}

/* ── 侧边栏右侧边框：去掉 border-right，靠颜色差实现视觉分隔 ── */
.side-navbar,
.side-navbar-inner {
    border-right: none !important;
}

/* ── 侧边栏 ul 去除默认 margin，保证分组间距统一 ── */
.side-navbar ul.list-unstyled {
    margin: 0 !important;
    padding: 0 !important;
}

/* ── 筛选表单统一高度 ── */
input.input, select.input { height: 42px; }
.btn { height: 42px; }

/* ── select 去除 iOS/Safari 原生样式，统一为自定义箭头 ── */
select.input {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

/* ── 原生日期输入框（被 JS 叠层替代后 opacity:0，此处仅作保险） ── */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    min-width: 0 !important;
    max-width: 100% !important;
    -webkit-appearance: none;
    appearance: none;
}

/* ── 筛选栏固定列：宽屏下日期框与下拉框等宽 ── */
@media (min-width: 768px) {
    .filter-col-fixed { width: 170px !important; flex: 0 0 170px !important; }
}

/* ── 筛选表单容器 & 标签 ── */
.filter-form {
    margin-bottom: 20px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.filter-label {
    display: block;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 4px;
}