/* ============================================


   学情辅助管理系统 - 样式表


   ============================================ */





/* ── CSS Variables / Design Tokens ── */


:root {


    /* Primary palette */


    --color-primary: #2563EB;


    --color-primary-hover: #1D4ED8;


    --color-primary-light: #DBEAFE;


    --color-primary-dark: #1E40AF;





    /* Sidebar */


    --sidebar-bg: #0F172A;


    --sidebar-hover: #1E293B;


    --sidebar-active: #2563EB;


    --sidebar-width: 240px;


    --sidebar-collapsed-width: 64px;





    /* Neutral */


    --color-bg: #F1F5F9;


    --color-white: #FFFFFF;


    --color-border: #E2E8F0;


    --color-text: #1E293B;


    --color-text-secondary: #64748B;


    --color-text-light: #94A3B8;





    /* Semantic */


    --color-success: #16A34A;


    --color-warning: #D97706;


    --color-danger: #DC2626;


    --color-info: #0EA5E9;





    /* Spacing */


    --spacing-xs: 4px;


    --spacing-sm: 8px;


    --spacing-md: 16px;


    --spacing-lg: 24px;


    --spacing-xl: 32px;





    /* Radius */


    --radius-sm: 4px;


    --radius-md: 8px;


    --radius-lg: 12px;





    /* Shadow */


    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);


    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);


    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);





    /* Transition */


    --transition: all 0.2s ease;


}





/* ── Reset ── */


*, *::before, *::after {


    box-sizing: border-box;


    margin: 0;


    padding: 0;


}





body {


    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;


    font-size: 14px;


    color: var(--color-text);


    background: var(--color-bg);


    line-height: 1.6;


    min-height: 100vh;


}





a { color: var(--color-primary); text-decoration: none; }


a:hover { color: var(--color-primary-hover); }


ul { list-style: none; }





/* ── App Layout ── */


.app-layout {


    display: flex;


    min-height: 100vh;


}





/* ── Sidebar ── */


.sidebar {


    width: var(--sidebar-width);


    background: var(--sidebar-bg);


    color: #CBD5E1;


    position: fixed;


    top: 0;


    left: 0;


    bottom: 0;


    z-index: 100;


    display: flex;


    flex-direction: column;


    transition: var(--transition);


    overflow-y: auto;


    overflow-x: hidden;


}





.sidebar.collapsed {


    width: var(--sidebar-collapsed-width);


}





.sidebar-header {


    display: flex;


    align-items: center;


    justify-content: space-between;


    padding: var(--spacing-md);


    border-bottom: 1px solid rgba(255,255,255,0.08);


    height: 60px;


}





.logo {


    display: flex;


    align-items: center;


    gap: var(--spacing-sm);


    white-space: nowrap;


    overflow: hidden;


}





.logo-icon { font-size: 24px; }


.logo-text { font-size: 16px; font-weight: 600; }





.sidebar.collapsed .logo-text { display: none; }





.sidebar-toggle {


    background: none;


    border: none;


    color: #CBD5E1;


    font-size: 18px;


    cursor: pointer;


    padding: var(--spacing-xs);


    border-radius: var(--radius-sm);


    flex-shrink: 0;


}


.sidebar-toggle:hover { background: var(--sidebar-hover); }





.sidebar-nav {


    flex: 1;


    padding: var(--spacing-sm) 0;


}





.sidebar-nav ul { padding: 0 var(--spacing-sm); }





.nav-item {


    display: flex;


    align-items: center;


    gap: var(--spacing-sm);


    padding: 10px var(--spacing-md);


    border-radius: var(--radius-md);


    color: #94A3B8;


    transition: var(--transition);


    white-space: nowrap;


    margin-bottom: 2px;


    font-size: 14px;


}





.nav-item:hover {


    background: var(--sidebar-hover);


    color: #E2E8F0;


}





.nav-item.active {


    background: var(--sidebar-active);


    color: var(--color-white);


}





.nav-icon { font-size: 16px; flex-shrink: 0; }





.sidebar.collapsed .nav-label { display: none; }


.sidebar.collapsed .nav-item { justify-content: center; padding: 10px; }





.nav-divider {


    height: 1px;


    background: rgba(255,255,255,0.08);


    margin: var(--spacing-sm) 0;


}





/* ── Main Wrapper ── */


.main-wrapper {


    flex: 1;


    margin-left: var(--sidebar-width);


    display: flex;


    flex-direction: column;


    min-height: 100vh;


    transition: var(--transition);


}





.sidebar.collapsed ~ .main-wrapper {


    margin-left: var(--sidebar-collapsed-width);


}





/* ── Top Bar ── */


.topbar {


    display: flex;


    align-items: center;


    justify-content: space-between;


    height: 60px;


    background: linear-gradient(90deg, #1e40af, #2563EB, #3b82f6);


    border-bottom: 1px solid var(--color-border);


    padding: 0 var(--spacing-lg);


    position: sticky;


    top: 0;


    z-index: 50;


    color: #ffffff;


}


/* ComfyUI生成的真图替换方式：


.topbar {


    background: url('/assets/img/header-bg.jpg') center/cover;


}


*/


/* Override topbar text colors for gradient background */


.topbar .system-title { color: #ffffff; }


.topbar .user-name { color: #e0e7ff; }


.topbar .dropdown-arrow { color: #a5b4fc; }


.topbar .semester-select { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.2); color: #e0e7ff; }





.system-title {


    font-size: 18px;


    font-weight: 600;


    color: var(--color-text);


}





.topbar-right {


    display: flex;


    align-items: center;


    gap: var(--spacing-md);


}





.semester-select {


    padding: 6px 12px;


    border: 1px solid var(--color-border);


    border-radius: var(--radius-sm);


    background: var(--color-white);


    font-size: 13px;


    color: var(--color-text);


    cursor: pointer;


}





.btn-icon {


    background: none;


    border: none;


    font-size: 18px;


    cursor: pointer;


    position: relative;


    padding: 4px;


}





.badge-dot {


    position: absolute;


    top: 2px;


    right: 2px;


    width: 8px;


    height: 8px;


    background: var(--color-danger);


    border-radius: 50%;


    display: none;


}





.user-menu { position: relative; }





.user-dropdown-btn {


    display: flex;


    align-items: center;


    gap: var(--spacing-sm);


    background: none;


    border: none;


    cursor: pointer;


    padding: var(--spacing-xs) var(--spacing-sm);


    border-radius: var(--radius-sm);


    color: var(--color-text);


}


.user-dropdown-btn:hover { background: var(--color-bg); }





.user-avatar {


    width: 32px;


    height: 32px;


    background: var(--color-primary);


    color: var(--color-white);


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 14px;


    font-weight: 600;


}





.user-name { font-size: 14px; }


.dropdown-arrow { font-size: 10px; color: var(--color-text-light); }





.user-dropdown {


    position: absolute;


    top: 100%;


    right: 0;


    background: var(--color-white);


    border: 1px solid var(--color-border);


    border-radius: var(--radius-md);


    box-shadow: var(--shadow-lg);


    min-width: 160px;


    display: none;


    z-index: 200;


    padding: var(--spacing-xs) 0;


}





.user-dropdown.show { display: block; }





.dropdown-item {


    display: block;


    padding: 8px var(--spacing-md);


    color: var(--color-text);


    font-size: 14px;


}


.dropdown-item:hover { background: var(--color-bg); }





.dropdown-divider {


    height: 1px;


    background: var(--color-border);


    margin: var(--spacing-xs) 0;


}





/* ── Main Content ── */


.main-content {


    flex: 1;


    padding: var(--spacing-lg);


}





/* ── Footer ── */


.app-footer {


    text-align: center;


    padding: var(--spacing-md);


    color: var(--color-text-light);


    font-size: 12px;


    border-top: 1px solid var(--color-border);


    background: linear-gradient(90deg, #f1f5f9, #e2e8f0, #f1f5f9);


    /* ComfyUI生成的真图替换方式：


    background: url('/assets/img/footer-bg.jpg') center/cover;


    */


}





/* ── Cards ── */


.card {


    background: var(--color-white);


    border-radius: var(--radius-md);


    box-shadow: var(--shadow-sm);


    padding: var(--spacing-lg);


    margin-bottom: var(--spacing-lg);


}





.card-title {


    font-size: 16px;


    font-weight: 600;


    margin-bottom: var(--spacing-md);


    padding-bottom: var(--spacing-sm);


    border-bottom: 1px solid var(--color-border);


}





.form-card { max-width: 600px; }





/* ── Dashboard ── */


.dashboard { }





.welcome-banner {


    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));


    color: var(--color-white);


    border-radius: var(--radius-lg);


    padding: var(--spacing-xl);


    margin-bottom: var(--spacing-lg);


}





.welcome-text h2 {


    font-size: 22px;


    margin-bottom: var(--spacing-xs);


    font-weight: 600;


}





.welcome-text p {


    opacity: 0.85;


    font-size: 14px;


}





.stats-row {


    display: grid;


    grid-template-columns: repeat(4, 1fr);


    gap: var(--spacing-md);


    margin-bottom: var(--spacing-lg);


}





.stat-card {


    background: var(--color-white);


    border-radius: var(--radius-md);


    padding: var(--spacing-lg);


    display: flex;


    align-items: center;


    gap: var(--spacing-md);


    box-shadow: var(--shadow-sm);


}





.stat-icon { font-size: 28px; }





.stat-label {


    font-size: 12px;


    color: var(--color-text-secondary);


    margin-bottom: 4px;


}





.stat-value {


    font-size: 18px;


    font-weight: 600;


    color: var(--color-text);


}





.dashboard-grid {


    display: grid;


    grid-template-columns: 2fr 1fr;


    gap: var(--spacing-lg);


}





.quick-actions {


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    gap: var(--spacing-md);


}





.quick-action-item {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: var(--spacing-sm);


    padding: var(--spacing-lg) var(--spacing-md);


    border: 1px solid var(--color-border);


    border-radius: var(--radius-md);


    transition: var(--transition);


    text-align: center;


    color: var(--color-text);


}


.quick-action-item:hover {


    border-color: var(--color-primary);


    background: var(--color-primary-light);


    color: var(--color-primary);


}





.qa-icon { font-size: 28px; }


.qa-label { font-size: 13px; font-weight: 500; }





.empty-state {


    text-align: center;


    padding: var(--spacing-xl);


    color: var(--color-text-light);


}





/* ── Buttons ── */


.btn {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    gap: var(--spacing-xs);


    padding: 8px 16px;


    border: 1px solid transparent;


    border-radius: var(--radius-sm);


    font-size: 14px;


    font-weight: 500;


    cursor: pointer;


    transition: var(--transition);


    line-height: 1.5;


}





.btn-primary {


    background: var(--color-primary);


    color: var(--color-white);


    border-color: var(--color-primary);


}


.btn-primary:hover {


    background: var(--color-primary-hover);


    border-color: var(--color-primary-hover);


}





.btn-secondary {


    background: var(--color-white);


    color: var(--color-text);


    border-color: var(--color-border);


}


.btn-secondary:hover {


    background: var(--color-bg);


}





.btn-danger {


    background: var(--color-danger);


    color: var(--color-white);


    border-color: var(--color-danger);


}


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





.btn-warning {


    background: var(--color-warning);


    color: var(--color-white);


    border-color: var(--color-warning);


}


.btn-warning:hover { background: #B45309; }





.btn-block { width: 100%; }





.btn-sm {


    padding: 4px 10px;


    font-size: 12px;


}





.btn:disabled {


    opacity: 0.6;


    cursor: not-allowed;


}





/* ── Forms ── */


.form-group {


    margin-bottom: var(--spacing-md);


}





.form-group label {


    display: block;


    margin-bottom: var(--spacing-xs);


    font-size: 14px;


    font-weight: 500;


    color: var(--color-text);


}





.required { color: var(--color-danger); }





.form-group input[type="text"],


.form-group input[type="password"],


.form-group input[type="email"],


.form-group input[type="number"],


.form-group input[type="search"],


.form-group select,


.form-group textarea {


    width: 100%;


    padding: 8px 12px;


    border: 1px solid var(--color-border);


    border-radius: var(--radius-sm);


    font-size: 14px;


    color: var(--color-text);


    transition: var(--transition);


    background: var(--color-white);


}





.form-group input:focus,


.form-group select:focus,


.form-group textarea:focus {


    outline: none;


    border-color: var(--color-primary);


    box-shadow: 0 0 0 3px var(--color-primary-light);


}





.form-group input:disabled {


    background: var(--color-bg);


    color: var(--color-text-light);


    cursor: not-allowed;


}





.form-actions {


    display: flex;


    gap: var(--spacing-sm);


    margin-top: var(--spacing-lg);


}





/* ── Tables ── */


.table {


    width: 100%;


    border-collapse: collapse;


}





.table thead th {


    padding: 10px var(--spacing-md);


    text-align: left;


    font-weight: 600;


    font-size: 13px;


    color: var(--color-text-secondary);


    background: var(--color-bg);


    border-bottom: 2px solid var(--color-border);


}





.table tbody td {


    padding: 10px var(--spacing-md);


    border-bottom: 1px solid var(--color-border);


    font-size: 14px;


}





.table tbody tr:nth-child(even) {


    background: #F8FAFC;


}





.table tbody tr:hover {


    background: var(--color-primary-light);


}





.text-center { text-align: center; }





.actions { white-space: nowrap; }





/* ── Badges ── */


.badge {


    display: inline-block;


    padding: 2px 8px;


    border-radius: 10px;


    font-size: 12px;


    font-weight: 500;


}





.badge-primary { background: var(--color-primary-light); color: var(--color-primary); }


.badge-success { background: #DCFCE7; color: var(--color-success); }


.badge-warning { background: #FEF3C7; color: var(--color-warning); }


.badge-danger { background: #FEE2E2; color: var(--color-danger); }


.badge-info { background: #E0F2FE; color: var(--color-info); }





/* ── Page Header ── */


.page-header {


    display: flex;


    align-items: center;


    justify-content: space-between;


    margin-bottom: var(--spacing-lg);


}





.page-header h2 {


    font-size: 20px;


    font-weight: 600;


}





/* ── Search Bar ── */


.search-bar {


    display: flex;


    gap: var(--spacing-sm);


    margin-bottom: var(--spacing-md);


}





.search-bar input {


    flex: 1;


    padding: 8px 12px;


    border: 1px solid var(--color-border);


    border-radius: var(--radius-sm);


    font-size: 14px;


}





/* ── Pagination ── */


.pagination {


    display: flex;


    gap: var(--spacing-xs);


    margin-top: var(--spacing-md);


    justify-content: center;


}





.page-link {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    min-width: 32px;


    height: 32px;


    padding: 0 var(--spacing-sm);


    border: 1px solid var(--color-border);


    border-radius: var(--radius-sm);


    font-size: 13px;


    color: var(--color-text);


    background: var(--color-white);


}





.page-link:hover {


    border-color: var(--color-primary);


    color: var(--color-primary);


}





.page-link.active {


    background: var(--color-primary);


    color: var(--color-white);


    border-color: var(--color-primary);


}





/* ── Toast Notification ── */


.toast-container {


    position: fixed;


    top: 20px;


    right: 20px;


    z-index: 9999;


    display: flex;


    flex-direction: column;


    gap: var(--spacing-sm);


}





.toast {


    padding: 12px 20px;


    border-radius: var(--radius-md);


    color: var(--color-white);


    font-size: 14px;


    box-shadow: var(--shadow-lg);


    animation: toastIn 0.3s ease;


    max-width: 360px;


    word-break: break-all;


}





.toast-success { background: var(--color-success); }


.toast-error { background: var(--color-danger); }


.toast-warning { background: var(--color-warning); }


.toast-info { background: var(--color-info); }





@keyframes toastIn {


    from { transform: translateX(100%); opacity: 0; }


    to { transform: translateX(0); opacity: 1; }


}





@keyframes toastOut {


    from { transform: translateX(0); opacity: 1; }


    to { transform: translateX(100%); opacity: 0; }


}





.toast.removing { animation: toastOut 0.3s ease forwards; }





/* ── Confirm Dialog ── */


.dialog-overlay {


    position: fixed;


    inset: 0;


    background: rgba(0,0,0,0.5);


    z-index: 9990;


    display: flex;


    align-items: center;


    justify-content: center;


}





.dialog-box {


    background: var(--color-white);


    border-radius: var(--radius-md);


    padding: var(--spacing-xl);


    box-shadow: var(--shadow-lg);


    min-width: 320px;


    max-width: 420px;


}





.dialog-box h3 { margin-bottom: var(--spacing-sm); font-size: 16px; }


.dialog-box p { color: var(--color-text-secondary); margin-bottom: var(--spacing-lg); }


.dialog-buttons { display: flex; gap: var(--spacing-sm); justify-content: flex-end; }





/* ── Login Page ── */


.login-page {


    display: flex;


    align-items: center;


    justify-content: center;


    min-height: 100vh;


    background: linear-gradient(135deg, #0a1628 0%, #1a3a5c 40%, #2563EB 70%, #0ea5e9 100%);


    background-size: 400% 400%;


    animation: gradientShift 15s ease infinite;


    position: relative;


}


.login-page::before {


    content: '';


    position: absolute;


    inset: 0;


    background: 


        radial-gradient(circle at 20% 50%, rgba(37,99,235,0.15) 0%, transparent 50%),


        radial-gradient(circle at 80% 20%, rgba(14,165,233,0.1) 0%, transparent 40%);


    pointer-events: none;


}


@keyframes gradientShift {


    0%, 100% { background-position: 0% 50%; }


    50% { background-position: 100% 50%; }


}


/* ComfyUI生成的真图替换方式：


.login-page {


    background: url('/assets/img/login-bg.jpg') center/cover no-repeat;


    animation: none;


}


.login-page::before { display: none; }


*/





.login-container {


    width: 100%;


    max-width: 420px;


    padding: var(--spacing-lg);


}





.login-card {


    background: var(--color-white);


    border-radius: var(--radius-lg);


    padding: 40px;


    box-shadow: var(--shadow-lg);


}





.login-header {


    text-align: center;


    margin-bottom: 32px;


}





.login-header h1 {


    font-size: 24px;


    color: var(--color-text);


    margin-bottom: var(--spacing-xs);


}





.login-header p {


    color: var(--color-text-light);


    font-size: 13px;


}





.login-tabs {


    display: flex;


    margin-bottom: var(--spacing-lg);


    border-bottom: 2px solid var(--color-border);


}





.tab-btn {


    flex: 1;


    padding: 10px;


    background: none;


    border: none;


    border-bottom: 2px solid transparent;


    margin-bottom: -2px;


    font-size: 14px;


    color: var(--color-text-secondary);


    cursor: pointer;


    transition: var(--transition);


}





.tab-btn.active {


    color: var(--color-primary);


    border-bottom-color: var(--color-primary);


    font-weight: 600;


}





.login-form .form-group {


    margin-bottom: 20px;


}





.sms-row {


    display: flex;


    gap: var(--spacing-sm);


}





.sms-row input {


    flex: 1;


}





.sms-row .btn {


    white-space: nowrap;


    flex-shrink: 0;


}





.login-footer {


    text-align: center;


    margin-top: var(--spacing-lg);


    color: rgba(255,255,255,0.7);


    font-size: 12px;


}







/* ── Tab System ── */

.tab-bar {

    display: flex;

    background: #f1f5f9;

    border-bottom: 2px solid #e2e8f0;

    overflow-x: auto;

    overflow-y: hidden;

    height: 38px;

    flex-shrink: 0;

    scrollbar-width: thin;

    scrollbar-color: #cbd5e1 transparent;

}

.tab-bar::-webkit-scrollbar { height: 4px; }

.tab-bar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

.tab-item {

    display: flex;

    align-items: center;

    padding: 0 12px;

    border-right: 1px solid #e2e8f0;

    cursor: pointer;

    white-space: nowrap;

    font-size: 13px;

    min-width: 80px;

    max-width: 180px;

    background: #f8fafc;

    user-select: none;

    transition: background 0.15s;

    flex-shrink: 0;

}

.tab-item:hover { background: #e2e8f0; }

.tab-item.active {

    background: #fff;

    border-bottom: 2px solid #2563EB;

    margin-bottom: -2px;

    font-weight: 500;

}

.tab-item .tab-label {

    overflow: hidden;

    text-overflow: ellipsis;

}

.tab-item .tab-close {

    margin-left: 8px;

    cursor: pointer;

    opacity: 0.4;

    font-size: 16px;

    line-height: 1;

    flex-shrink: 0;

    padding: 0 2px;

}

.tab-item .tab-close:hover { opacity: 1; color: #DC2626; }

.tab-content-area {

    flex: 1;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    position: relative;

}

.tab-content {

    flex: 1;

    position: relative;

    display: none;

}

.tab-content.has-tabs { display: block; }

.tab-pane {

    position: absolute;

    inset: 0;

    display: none;

    background: #fff;

    overflow-y: auto;

}

.tab-pane.active { display: block; }

.tab-pane iframe {

    width: 100%;

    height: 100%;

    border: none;

}

.main-content { flex: 1; overflow-y: auto; }

.tab-content.has-tabs + .main-content { display: none; }



/* ── Responsive ── */


@media (max-width: 1199px) {


    .stats-row {


        grid-template-columns: repeat(2, 1fr);


    }


    .dashboard-grid {


        grid-template-columns: 1fr;


    }


    .quick-actions {


        grid-template-columns: repeat(3, 1fr);


    }


}





@media (max-width: 767px) {


    .sidebar {


        width: var(--sidebar-collapsed-width);


    }


    .sidebar .logo-text,


    .sidebar .nav-label { display: none; }


    .sidebar .nav-item { justify-content: center; padding: 10px; }





    .main-wrapper {


        margin-left: var(--sidebar-collapsed-width);


    }





    .sidebar.expanded {


        width: var(--sidebar-width);


    }


    .sidebar.expanded .logo-text { display: inline; }


    .sidebar.expanded .nav-label { display: inline; }


    .sidebar.expanded .nav-item { justify-content: flex-start; padding: 10px var(--spacing-md); }





    .main-content { padding: var(--spacing-md); }


    .stats-row { grid-template-columns: 1fr; }


    .quick-actions { grid-template-columns: repeat(2, 1fr); }


    .topbar { padding: 0 var(--spacing-md); }


    .system-title { display: none; }


    .page-header { flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; }


}
/* ── Form Messages ── */
.form-message {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
}
.form-message.success {
    background: #F0FDF4;
    color: var(--color-success);
    border: 1px solid #BBF7D0;
}
.form-message.error {
    background: #FEF2F2;
    color: var(--color-danger);
    border: 1px solid #FECACA;
}