/**
 * 移动端访问限制CSS
 * 作为JavaScript检测的备用方案
 */

/* 移动端隐藏主要内容，显示提示信息 */
@media screen and (max-width: 767px) {
    /* 隐藏主要内容 */
    .main-content,
    .container,
    .admin-content,
    .question-layout,
    .bank-header,
    .stats-overview,
    .navigation,
    header,
    nav,
    .sidebar,
    .content-area {
        display: none !important;
    }
    
    /* 显示移动端提示 */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        z-index: 9999;
        display: block;
    }
    
    body::after {
        content: "💻\A 请使用电脑访问\A CAAC地面站题库系统\A\A 手机屏幕无法完整展示\A 复杂的题目内容和功能界面\A\A 请在电脑浏览器中访问获得最佳体验\A\A 点击刷新页面重新检测";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
        color: white;
        text-align: center;
        font-size: 16px;
        line-height: 1.8;
        white-space: pre-line;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        padding: 40px 30px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        max-width: 90vw;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
}

/* 平板设备（横屏）允许访问 */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    body::before,
    body::after {
        display: none !important;
    }
}

/* 大屏平板允许访问 */
@media screen and (min-width: 1024px) {
    body::before,
    body::after {
        display: none !important;
    }
}

/* 特殊情况：强制访问模式 */
body.force-mobile-access::before,
body.force-mobile-access::after {
    display: none !important;
}

/* 移动端特殊样式：如果JavaScript检测失败，至少保证基本可用性 */
@media screen and (max-width: 767px) {
    /* 强制访问时的基本样式 */
    body.force-mobile-access .main-content,
    body.force-mobile-access .container {
        display: block !important;
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    body.force-mobile-access .question-layout {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    
    body.force-mobile-access .left-panel,
    body.force-mobile-access .right-panel {
        width: 100% !important;
        margin: 10px 0 !important;
    }
    
    /* 添加移动端警告横幅 */
    body.force-mobile-access::before {
        content: "⚠️ 移动端体验可能不佳，建议使用电脑访问";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #ff6b6b;
        color: white;
        text-align: center;
        padding: 10px;
        font-size: 12px;
        z-index: 1000;
        display: block;
    }
    
    body.force-mobile-access .main-content {
        margin-top: 50px !important;
    }
}

/* 打印样式：移除移动端限制 */
@media print {
    body::before,
    body::after {
        display: none !important;
    }
    
    .main-content,
    .container {
        display: block !important;
    }
}