/* ===== common.css — 公共样式 ===== */

/* CSS 变量 */
:root {
    --color-primary: #2563A0;
    --color-primary-dark: #143C78;
    --color-primary-light: #378ADD;
    --color-success: #1D9E75;
    --color-warning: #BA7517;
    --color-danger: #A32D2D;
    --color-info: #378ADD;
    --color-text: #0F2440;
    --color-text-light: #3D5A80;
    --color-text-muted: #5A7A9A;
    --color-bg: #f0f4f8;
    --color-border: rgba(37, 99, 160, 0.25);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
    --gap-sm: 8px;
    --gap-md: 14px;
    --gap-lg: 18px;
    --pad-card: 18px;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,'Inter','Microsoft YaHei',sans-serif;color:var(--color-text);min-height:100vh}

/* 公共按钮 */
.btn{
    display:inline-block;padding:10px 24px;border-radius:var(--radius-md);
    font-size:14px;font-weight:600;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
    color:#fff;letter-spacing:0.3px;transition:transform 0.15s,box-shadow 0.2s;text-decoration:none;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(37,99,160,0.3)}
.btn:active{transform:scale(0.98)}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:var(--radius-sm)}
.btn-outline{background:#fff;color:var(--color-primary);border:1.5px solid var(--color-primary)}
.btn-outline:hover{background:rgba(37,99,160,0.06)}
.btn-danger{background:linear-gradient(135deg,#D85A30,#A32D2D)}
.btn-success{background:linear-gradient(135deg,#1D9E75,#0F6E56)}

/* 公共表单 */
.form-group{margin-bottom:16px;text-align:left}
.form-group label{display:block;font-size:13px;color:var(--color-text-light);margin-bottom:6px;font-weight:600}
.form-group input,.form-group select,.form-group textarea{
    width:100%;padding:10px 14px;font-size:14px;
    border:1.5px solid var(--color-border);border-radius:var(--radius-md);
    color:var(--color-text);font-weight:500;background:#fff;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
    border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px rgba(37,99,160,0.1)
}
.form-group .req{color:var(--color-danger)}
.form-group .hint{font-size:12px;color:var(--color-text-muted);margin-top:4px}
.form-error{font-size:13px;color:var(--color-danger);margin-top:8px;display:none;padding:8px 14px;background:rgba(163,45,45,0.06);border-radius:var(--radius-sm)}

/* 公共卡片 */
.card{
    background:rgba(255,255,255,0.92);border-radius:var(--radius-lg);
    padding:var(--pad-card);box-shadow:var(--shadow-sm);
}

/* 顶部导航栏 */
.top-nav{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 24px;background:rgba(12,45,94,0.95);
    position:relative;z-index:10;flex-wrap:wrap;gap:8px;
}
.top-nav .nav-brand{font-size:16px;font-weight:600;color:#fff}
.top-nav .nav-user{font-size:13px;color:rgba(255,255,255,0.92)}
.top-nav .nav-user a{color:rgba(255,255,255,0.85);cursor:pointer;margin-left:12px;text-decoration:underline}
.top-nav .nav-user a:hover{color:#fff}
.top-nav .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.top-nav .nav-links a{
    color:rgba(255,255,255,0.92);font-size:13px;text-decoration:none;
    padding:5px 12px;border-radius:6px;transition:all 0.2s;
}
.top-nav .nav-links a:hover{background:rgba(255,255,255,0.1);color:#fff}
.top-nav .nav-links a.active{background:rgba(255,255,255,0.2);color:#fff}

/* 空状态 */
.empty-state{
    text-align:center;padding:60px 20px;color:var(--color-text-muted);
}
.empty-state .icon{font-size:48px;margin-bottom:16px}
.empty-state .title{font-size:18px;font-weight:600;color:var(--color-text-light);margin-bottom:8px}
.empty-state .desc{font-size:14px;margin-bottom:20px}
.empty-state .btn{margin-top:8px}

/* 班级卡片 */
.class-card{
    background:rgba(255,255,255,0.92);border-radius:var(--radius-lg);
    padding:24px;box-shadow:var(--shadow-sm);border:1px solid var(--color-border);
    transition:transform 0.2s,box-shadow 0.2s;cursor:pointer;text-decoration:none;display:block;
}
.class-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.class-card .card-course{font-size:18px;font-weight:700;color:var(--color-primary-dark);margin-bottom:6px}
.class-card .card-class{font-size:14px;color:var(--color-text-light);margin-bottom:12px}
.class-card .card-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--color-text-muted)}
.class-card .card-meta span{display:flex;align-items:center;gap:4px}

/* 网格布局 */
.card-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:var(--gap-lg);padding:0 0 20px;
}

/* Toast 提示 */
.toast{
    position:fixed;top:20px;left:50%;transform:translateX(-50%);
    padding:12px 28px;border-radius:var(--radius-md);font-size:14px;font-weight:500;
    z-index:9999;opacity:0;transition:opacity 0.3s,transform 0.3s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-success{background:var(--color-success);color:#fff}
.toast-error{background:var(--color-danger);color:#fff}
.toast-info{background:var(--color-primary);color:#fff}

/* 错误页 */
.error-page{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-height:100vh;text-align:center;padding:40px;
    background:linear-gradient(160deg,#0C2D5E,#143C78,#1A4F8A,#2563A0);
}
.error-page .error-icon{font-size:64px;margin-bottom:16px}
.error-page .error-code{font-size:80px;font-weight:700;color:rgba(255,255,255,0.3);line-height:1}
.error-page .error-msg{font-size:20px;color:rgba(255,255,255,0.9);margin:16px 0 8px}
.error-page .error-sub{font-size:14px;color:rgba(255,255,255,0.5);margin-bottom:24px;line-height:1.6}
.error-page .btn{margin-top:8px}

/* 加载中 */
.loading{text-align:center;padding:16px;color:var(--color-text-light);display:none}

/* 等级颜色工具类（跨页面复用） */
.rg-A{background:rgba(29,158,117,0.15);color:#1D9E75}
.rg-B{background:rgba(55,138,221,0.15);color:#378ADD}
.rg-C{background:rgba(186,117,23,0.15);color:#BA7517}
.rg-D{background:rgba(216,90,48,0.15);color:#D85A30}
.rg-E{background:rgba(163,45,45,0.15);color:#A32D2D}
.rs-A{color:#1D9E75}
.rs-B{color:#378ADD}
.rs-C{color:#BA7517}
.rs-D{color:#D85A30}
.rs-E{color:#A32D2D}

/* 响应式 */
@media (max-width: 768px) {
    .card-grid{grid-template-columns:1fr}
    .top-nav{padding:10px 14px}
    .top-nav .nav-brand{font-size:14px}
}

/* ===== 通用工具类 ===== */

/* 隐藏元素（全局生效，确保所有页面中 .hidden 类都能正确隐藏元素）
   使用 !important 以覆盖内联 display 样式（如 base_starry.html 密码弹窗的 display:flex） */
.hidden{
    display:none !important;
}

/* ===== 通用弹窗样式（从 dashboard.css 提升，供所有页面复用） ===== */
/* base_starry.html 及多个教师页面均使用 .modal-overlay，需全局可用 */
.modal-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
}
.modal-overlay.hidden{
    display:none;
}
.modal-box{
    background:#fff;
    border-radius:14px;
    padding:24px;
    min-width:360px;
    max-width:480px;
    box-shadow:0 16px 48px rgba(0,0,0,0.3);
}
.modal-title{
    font-size:16px;
    font-weight:600;
    color:#0F2440;
    margin-bottom:16px;
    padding-bottom:10px;
    border-bottom:1px solid #E0E8F0;
}
.modal-body{
    margin-bottom:20px;
}
.modal-field{
    margin-bottom:14px;
}
.modal-field label{
    display:block;
    font-size:13px;
    color:#2C4A6E;
    margin-bottom:4px;
    font-weight:500;
}
.modal-field input,
.modal-field select,
.modal-field textarea{
    width:100%;
    padding:8px 12px;
    border:1px solid #C5D5E5;
    border-radius:6px;
    font-size:13px;
    color:#0F2440;
    background:#fff;
    box-sizing:border-box;
}
.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus{
    outline:none;
    border-color:#378ADD;
    box-shadow:0 0 0 3px rgba(55,138,221,0.1);
}
.modal-field .req{
    color:#E60000;
}
.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}
.modal-btn{
    padding:8px 20px;
    border-radius:8px;
    font-size:13px;
    font-weight:500;
    border:none;
    cursor:pointer;
    transition:all 0.15s;
}
.modal-btn-cancel{
    background:#E8EDF2;
    color:#5A7A9A;
}
.modal-btn-cancel:hover{
    background:#D5DDE5;
}
.modal-btn-confirm{
    background:linear-gradient(135deg,#2563A0,#143C78);
    color:#fff;
}
.modal-btn-confirm:hover{
    opacity:0.9;
}
.modal-btn-confirm:disabled{
    opacity:0.5;
    cursor:not-allowed;
}