/* 自定义样式补充 */
table.data-table th {
    white-space: nowrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1rem;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    transition: .15s;
    cursor: pointer;
}

.btn-primary {
    background: #4f46e5;
    color: #fff;
}

.btn-primary:hover {
    background: #4338ca;
}

.btn-secondary {
    background: #e5e7eb;
    color: #374151;
}

.btn-secondary:hover {
    background: #d1d5db;
}

.btn-danger {
    background: #ef4444;
    color: #fff;
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-sm {
    padding: .25rem .625rem;
    font-size: .75rem;
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.form-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    outline: none;
    transition: .15s;
}

.form-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: .25rem;
}

/* ===== 登录页输入框图标 ===== */
.input-icon { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:#9ca3af; pointer-events:none; z-index:1; }
.input-with-icon { padding-left: 2.25rem !important; }

/* ===== select 下拉框美化（覆盖浏览器默认样式） ===== */
select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1.1rem;
    padding-right: 2.5rem;
    cursor: pointer;
}
/* option 列表项美化 */
select.form-input option {
    padding: .5rem .75rem;
    color: #374151;
    background: #fff;
    border: none;
    border-radius: .25rem;
}
select.form-input option:checked,
select.form-input option:checked:hover {
    background: #eef2ff linear-gradient(#eef2ff, #eef2ff) !important;
    color: #4f46e5 !important;
    font-weight: 500;
}
select.form-input option:hover,
select.form-input:focus > option:checked:hover {
    background: #f5f3ff !important;
    color: #4f46e5 !important;
}
/* Firefox 专用 */
@-moz-document url-prefix() {
    select.form-input option { padding: .4rem .75rem; }
    select.form-input option:checked { background: #eef2ff !important; color: #4f46e5 !important; }
}

/* ===== JS 自定义 select 下拉组件 ===== */
.custom-select { position: relative; display: block; }
select.cs-native {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0;
}
.cs-trigger {
    position: relative;
    width: 100%;
    min-height: calc(.5rem * 2 + .875rem);
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: #374151;
    background: #fff;
    cursor: pointer; user-select: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.cs-trigger:hover { border-color: #9ca3af; }
.cs-trigger.cs-active, .cs-trigger:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
    outline: none;
}
.cs-trigger.cs-disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
.cs-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 1.5rem; }
.cs-arrow { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: #6b7280; display: flex; align-items: center; transition: transform .2s; }
.cs-trigger.cs-active .cs-arrow { transform: translateY(-50%) rotate(180deg); }

.cs-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + .25rem);
    left: 0; right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.12), 0 4px 6px rgba(0,0,0,.06);
    max-height: 15rem;
    overflow-y: auto;
    padding: .25rem;
    animation: csFadeIn .12s ease-out;
}
.cs-dropdown.cs-open { display: block; }
.cs-option {
    padding: .5rem .75rem;
    font-size: .875rem;
    color: #374151;
    border-radius: .375rem;
    cursor: pointer;
    transition: background .1s, color .1s;
}
.cs-option:hover { background: #eef2ff; color: #4f46e5; }
.cs-option.cs-selected { background: #e0e7ff; color: #4338ca; font-weight: 600; }
@keyframes csFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
/* 下拉面板滚动条 */
.cs-dropdown::-webkit-scrollbar { width: 6px; }
.cs-dropdown::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.cs-dropdown::-webkit-scrollbar-track { background: transparent; }

/* ===== 侧边栏美化 ===== */
.sidebar-bg {
    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 45%, #3730a3 100%);
    box-shadow: 2px 0 12px rgba(0, 0, 0, .15);
}

.sidebar-item .fa {
    transition: transform .15s;
}

.sidebar-item:hover .fa {
    transform: scale(1.1);
}

.sidebar-item span {
    transition: transform .15s;
    display: inline-block;
}

.sidebar-item:hover span {
    transform: scale(1.05);
}

.sidebar-active {
    background: rgba(255, 255, 255, .16);
    color: #fff !important;
    font-weight: 600;
    /* box-shadow: inset 3px 0 0 #a5b4fc; */
}

.sidebar-group {
    padding: .75rem .75rem .25rem;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(199, 210, 254, .55);
}

.sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .3);
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* ===== Tailwind 缺失的 hover 变体补丁（预编译版未包含） ===== */
.hover\:bg-indigo-600:hover {
    background-color: #4f46e5;
}

.hover\:text-red-300:hover {
    color: #fca5a5;
}

.hover\:text-red-500:hover {
    color: #ef4444;
}

.hover\:bg-indigo-700:hover {
    background-color: #4338ca;
}

/* ===== Tailwind 缺失的响应式类补丁 ===== */
@media (min-width: 768px) {
    .md\:translate-x-0 {
        transform: translateX(0) !important;
    }

    .md\:static {
        position: static !important;
    }

    .md\:hidden {
        display: none !important;
    }

    .md\:inline {
        display: inline !important;
    }
}

@media (max-width: 767px) {
    .md\:hidden {
        display: block !important;
    }
}

/* ===== 用户下拉菜单 ===== */
.user-dropdown {
    position: relative;
}

.user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    min-width: 180px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    border: 1px solid #e5e7eb;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 100;
    overflow: hidden;
}

.user-dropdown:hover .user-dropdown-menu,
.user-dropdown:focus-within .user-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-header {
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 14px;
    color: #374151;
    transition: background .12s;
}

.user-dropdown-item:hover {
    background: #f3f4f6;
    text-decoration: none;
}

.user-dropdown-item i {
    width: 16px;
    text-align: center;
}

/* ===== 操作栏图标按钮 ===== */
.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: #6b7280;
    transition: background .12s, color .12s;
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 14px;
}

.action-icon:hover {
    background: #eef2ff;
    color: #4f46e5;
    text-decoration: none;
}

.action-icon.action-danger:hover {
    background: #fef2f2;
    color: #ef4444;
}

.action-icon.action-success:hover {
    background: #f0fdf4;
    color: #16a34a;
}

/* ===== Footer ===== */
.app-footer {
    text-align: center;
    padding: 12px 16px;
    font-size: 12px;
    color: #9ca3af;
    border-top: 1px solid #f3f4f6;
    background: #353637;
    flex-shrink: 0;
}

/* ===== 分类树展开收起动画 ===== */
.cat-body {
    max-height: 6000px;
    overflow: hidden;
    transition: max-height .3s ease-in-out, opacity .2s ease;
    opacity: 1;
}
.cat-body.collapsed {
    max-height: 0;
    opacity: 0;
}
.cat-chevron {
    transition: transform .2s ease;
    display: inline-block;
}
.cat-chevron.collapsed {
    transform: rotate(-90deg);
}
.cat-header {
    cursor: pointer;
    user-select: none;
}
.cat-header:hover {
    opacity: .85;
}

/* ===== 学科弹窗自定义复选框 ===== */
.subj-check {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid #d1d5db;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: all .15s ease;
    outline: none;
}
.subj-check:hover {
    border-color: #6366f1;
}
.subj-check:checked {
    background: #4f46e5;
    border-color: #4f46e5;
}
.subj-check:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.subj-check:focus {
    box-shadow: 0 0 0 3px rgba(79,70,229,.2);
}

/* ===== 通用数据表格样式（全站表格美化） ===== */
.data-table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.data-table thead {
    background: #fafbfc;
    border-bottom: 1px solid #e5e7eb;
}
.data-table th {
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}
.data-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    text-align: center;
}
.data-table td.text-left,
.data-table td.col-name,
.data-table td.col-student-name {
    text-align: left;
}
.data-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background .15s ease;
}
.data-table tbody tr:nth-child(odd) {
    background: #f9fafb;
}
.data-table tbody tr:nth-child(even) {
    background: #ffffff;
}
.data-table tbody tr:hover {
    background: #eef2ff !important;
}
.data-table tbody tr:last-child {
    border-bottom: none;
}
.data-table .empty-row td {
    text-align: center;
    color: #9ca3af;
    padding: 1.5rem 1rem;
}

/* ===== 弹窗动画 ===== */
.modal-overlay {
    transition: opacity .2s ease;
    opacity: 0;
}
.modal-overlay.modal-show {
    opacity: 1;
}
.modal-box {
    transition: transform .2s ease, opacity .2s ease;
    transform: scale(.95) translateY(-10px);
    opacity: 0;
}
.modal-overlay.modal-show .modal-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}