/*
 * 页面样式文件
 * 这里维护 index.html 的视觉样式、响应式布局、登录页弹窗、课表网格、成绩/缺课卡片等外观。
 * 修改时机：只改颜色、间距、背景图、移动端适配、卡片/表格样式时，优先改这个文件。
 * 如果要改接口请求、按钮点击逻辑或数据渲染，请去 static/js/app.js。
 */

/* 全局页面底色、字体和背景图基础设置：改整体视觉基调时看这里。 */
body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            background-color: #f0f2f5; 
            margin: 0; padding: 10px; box-sizing: border-box; min-height: 100vh;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-size: cover;
            transition: background 0.5s ease;
        }

        /* ================= 🚀 自定义壁纸路径设置区 ================= */
        @media (min-width: 769px) {
            body { background-image: url('../../images/PC.png'); }
        }

        @media (max-width: 768px) {
            body { 
                background-image: url('../../images/Android.png'); 
                /* 🚀 杀手锏 1：强制阻止微信和 iOS 自动放大网页字体 */
                -webkit-text-size-adjust: 100%; 
            }

            /* 🚀 杀手锏 2：重构手机端头部，改为上下排列，彻底解决拥挤和错位 */
            .nav-header {
                flex-direction: column !important; 
                align-items: stretch !important;
                gap: 15px !important;
                padding: 20px 15px !important;
            }
            .nav-header > div:first-child h2 { margin: 0 0 5px 0 !important; font-size: 22px !important; }
            .nav-header > div:first-child p { margin: 0 0 5px 0 !important; font-size: 13px !important; line-height: 1.4 !important; }
            .nav-header > div:last-child {
                width: 100%;
                justify-content: space-between !important; 
            }

            /* 🚀 手机端登录页专属优化 */
            #login-view {
                width: 90% !important; 
                margin: 15vh auto 0 !important;
                padding: 35px 20px !important; 
            }
            .input-group { margin-bottom: 20px !important; } 
            .input-group label { font-size: 15px !important; margin-bottom: 8px !important; }
            .input-group input, .input-group select { 
                padding: 15px !important; 
                font-size: 16px !important; 
                border-radius: 8px !important;
                -webkit-appearance: none;
            }
            .btn-primary { 
                padding: 15px !important; 
                font-size: 17px !important; 
                margin-top: 15px !important; 
                border-radius: 8px !important;
                -webkit-appearance: none;
            }

            /* 🚀 手机端布局优化 */
            .timetable { 
                grid-template-columns: 45px repeat(7, minmax(80px, 1fr)) !important; 
                grid-template-rows: 45px repeat(4, 45px) 20px repeat(4, 45px) 20px repeat(4, 45px) !important; 
                min-width: 605px !important; 
            }
            
            .header-cell { font-size: 12px !important; }
            .time-cell b { font-size: 13px !important; }
            .time-cell div { font-size: 8px !important; } 
            .course-card { padding: 3px !important; border-radius: 4px !important; margin: 1px !important; }
            
            /* 手机端成绩卡片优化 */
            .score-grid { grid-template-columns: 1fr !important; }
        }

        /* ================= 📢 登录页公告弹窗样式 ================= */
        /* 登录前公告弹窗：改公告弹窗遮罩、卡片尺寸、按钮样式时看这里。 */
        #announcement-modal {
            display: flex; 
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.4); z-index: 9999;
            justify-content: center; align-items: center;
            backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
            animation: fadeIn 0.3s ease;
        }
        .modal-content {
            background: rgba(255, 255, 255, 0.95);
            width: 85%; max-width: 350px;
            padding: 25px 20px; border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            text-align: center;
        }
        .modal-content h3 { margin-top: 0; color: #1890ff; font-size: 18px; margin-bottom: 15px;}
        .modal-content p { color: #555; font-size: 14px; line-height: 1.6; text-align: left; margin-bottom: 20px; }
        .btn-close-modal {
            width: 100%; padding: 12px; background-color: #1890ff; color: white;
            border: none; border-radius: 6px; font-size: 15px; font-weight: bold; cursor: pointer;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* ================= 登录页毛玻璃效果及悬浮头像 ================= */
        /* 登录页区域：改头像、输入框、登录按钮、玻璃拟态效果时看这里。 */
        #login-view 
        {
            max-width: 400px; width: 95%; margin: 15vh auto 0;
            background: rgba(255, 255, 255, 0.1); 
            backdrop-filter: blur(10px); 
            -webkit-backdrop-filter: blur(10px);
            padding: 30px 20px; border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15); text-align: center;
        }
        
        .login-avatar {
            width: 84px; height: 84px; border-radius: 50%;
            margin: -72px auto 15px auto; 
            border: 4px solid rgba(255, 255, 255, 0.7);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            object-fit: cover; display: block;
            background-color: rgba(255,255,255,0.8);
        }

        #login-view h2 { margin-top: 0; color: #1a1a1a; margin-bottom: 25px; }
        .input-group { margin-bottom: 15px; text-align: left; }
        .input-group label { display: block; margin-bottom: 6px; color: #555; font-size: 14px; font-weight: 500; }
        .input-group input, .input-group select { width: 100%; padding: 12px; border: 1px solid #d9d9d9; border-radius: 6px; box-sizing: border-box; font-size: 15px; outline: none; background: rgba(255,255,255,0.6); }
        .btn-primary { width: 100%; padding: 14px; background-color: #1890ff; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s; }
        .btn-secondary { padding: 8px 16px; border: 1px solid #d9d9d9; border-radius: 6px; cursor: pointer; background: rgba(255,255,255,0.7); font-weight:bold; color:#333; }


        /* 登录后的主页面框架：改顶部导航、内容容器、滚动区域时看这里。 */
        .app-container { display: none; max-width: 1200px; margin: 0 auto; }
        
        .nav-header { 
            display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 15px 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.03); 
            background: rgba(255, 255, 255, 0.3); 
        }
        
        .table-wrapper { 
            width: 100%; max-height: 75vh; overflow: auto; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.04); 
            background: rgba(255, 255, 255, 0.15); 
        }
        
        /* 课表样式 */
        /* 课表网格：改节次列、星期列、课程卡片外观时看这里。 */
        .timetable { 
            display: grid; grid-template-columns: 80px repeat(7, minmax(120px, 1fr)); grid-template-rows: 55px repeat(4, 60px) 30px repeat(4, 60px) 30px repeat(4, 60px); gap: 1px; min-width: 920px; 
            background-color: rgba(255, 255, 255, 0.2); 
        }
        .cell { display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.1); }
        .header-cell { position: sticky; top: 0; z-index: 105; font-weight: bold; flex-direction: column; box-shadow: 0 2px 5px rgba(0,0,0,0.05); background-color: rgba(250, 250, 250, 0.3); }
        .time-cell { position: sticky; left: 0; z-index: 100; flex-direction: column; font-size: 13px; box-shadow: 2px 0 5px rgba(0,0,0,0.05); background-color: rgba(249, 249, 249, 0.3); }
        .timetable > .header-cell:first-child { left: 0; z-index: 110; background-color: rgba(250, 250, 250, 0.4); }
        .course-card { 
            margin: 2px; border-radius: 6px; padding: 6px; color: white; font-size: 11px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; 
            border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 4px 8px rgba(0,0,0,0.1); text-shadow: 0px 1px 3px rgba(0,0,0,0.8); 
        }

        /* 🚀 成绩展示界面专属样式 */
        /* 成绩和缺课卡片列表：两个查询结果共用这套卡片样式。 */
        .score-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 15px;
            padding: 20px;
        }
        .score-item {
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border-radius: 12px;
            padding: 15px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            display: flex; justify-content: space-between; align-items: center;
        }
        .score-info { color: #333; text-shadow: 0px 1px 2px rgba(255,255,255,0.6); }
        .score-course { font-weight: bold; font-size: 16px; margin-bottom: 5px; }
        .score-credit { font-size: 13px; opacity: 0.8; }
        .score-number {
            font-size: 24px; font-weight: bold; color: #1890ff;
            background: rgba(255,255,255,0.7);
            padding: 5px 15px; border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* 🚀 缺课验证码辅助样式 */
        /* 验证码区域：改验证码图片、输入框并排布局时看这里。 */
        .captcha-box { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
        .captcha-img { height: 42px; border-radius: 6px; cursor: pointer; background: #eee; min-width: 100px; border: 1px solid #ddd; object-fit: contain; }
        .color-red { color: #ff4d4f !important; }