/* =============================================
   RESPONSIVE ENHANCEMENTS v2
   多端响应式增强：PC / 平板 / 手机全面适配
   ============================================= */

/* ===== 大屏优化 (≥1200px) ===== */
@media (min-width: 1200px) {
    .hero h1 {
        font-size: 3.2rem;
    }
    
    .container {
        max-width: 1200px;
    }
    
    .dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .chart-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== 中等屏优化 (992-1199px) ===== */
@media (max-width: 1199px) and (min-width: 769px) {
    .hero-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-actions {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .chart-row {
        grid-template-columns: 1fr;
    }
    
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== 平板优化 (769-991px) ===== */
@media (max-width: 991px) and (min-width: 769px) {
    .container {
        padding: 0 20px;
    }
    
    .logo {
        font-size: 1rem;
    }
    
    .nav-links a {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
    
    .hero {
        padding: 50px 0 40px;
    }
    
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .dashboard {
        padding: 24px 0;
    }
    
    .exam-container {
        padding: 24px;
    }
    
    .section {
        padding: 20px;
    }
}

/* ===== 手机优化 (≤768px) - 全面增强 ===== */
@media (max-width: 768px) {
    /* 布局 */
    .container {
        padding: 0 14px;
    }
    
    .logo {
        font-size: 1rem;
    }
    
    .logo i {
        width: 30px;
        height: 30px;
        font-size: 1.2rem;
    }
    
    /* Hero 区域 */
    .hero {
        padding: 40px 0 30px;
    }
    
    .hero h1 {
        font-size: 1.5rem;
    }
    
    .subtitle {
        font-size: 0.95rem;
        margin-bottom: 24px;
    }
    
    .hero-features {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin: 30px 0;
    }
    
    .feature {
        padding: 20px 16px;
    }
    
    .feature i {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }
    
    .feature h3 {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .feature p {
        font-size: 0.8rem;
    }
    
    .hero-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .hero-actions .btn {
        width: 100%;
    }
    
    /* 系统信息 */
    .system-info {
        padding: 30px 0;
    }
    
    .info-section {
        margin-bottom: 32px;
    }
    
    .info-section h2 {
        font-size: 1.2rem;
        margin-bottom: 16px;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .info-card {
        padding: 18px;
    }
    
    .rules {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .rule {
        padding: 14px;
        flex-direction: column;
        gap: 8px;
    }
    
    .rule i {
        font-size: 1.2rem;
    }
    
    .rule h4 {
        font-size: 0.9rem;
    }
    
    .rule p {
        font-size: 0.8rem;
    }
    
    /* 通知卡片 */
    .info-card[onclick] {
        padding: 14px;
    }
    
    /* 仪表板 */
    .dashboard {
        padding: 20px 0;
    }
    
    .dashboard-header h1 {
        font-size: 1.3rem;
    }
    
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .stat-card {
        padding: 16px 14px;
    }
    
    .stat-card i {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    
    .stat-card h3 {
        font-size: 1.5rem;
    }
    
    .stat-card p {
        font-size: 0.8rem;
    }
    
    .dashboard-actions {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .action-card {
        padding: 20px 16px;
    }
    
    .action-card i {
        font-size: 2rem;
        margin-bottom: 12px;
    }
    
    .action-card h3 {
        font-size: 1rem;
    }
    
    .action-card p {
        font-size: 0.85rem;
    }
    
    /* 学生概览 */
    .student-overview {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .overview-card {
        padding: 14px;
        gap: 10px;
    }
    
    .overview-card i {
        font-size: 1.5rem;
    }
    
    .overview-card span {
        font-size: 1.2rem;
    }
    
    .quick-stats-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .quick-stat {
        padding: 12px;
    }
    
    /* 区块 */
    .dashboard-sections {
        gap: 16px;
    }
    
    .section {
        padding: 18px;
    }
    
    .section h2 {
        font-size: 1rem;
        margin-bottom: 14px;
    }
    
    /* 学生信息 */
    .student-info {
        padding: 18px;
        margin-bottom: 20px;
    }
    
    .student-info h3 {
        font-size: 1rem;
        margin-bottom: 14px;
    }
    
    .info-item {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    
    /* 认证页面 */
    .auth-container {
        padding: 30px 14px;
        min-height: calc(100vh - 56px - 70px);
    }
    
    .auth-card {
        padding: 24px 18px;
        box-shadow: var(--shadow-lg);
        border-radius: var(--radius-lg);
    }
    
    .auth-card h2 {
        font-size: 1.3rem;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-group label {
        font-size: 0.85rem;
    }
    
    .form-group input,
    .form-group select {
        padding: 10px 12px;
        font-size: 16px; /* 防止iOS自动缩放 */
    }
    
    .form-actions {
        margin-top: 20px;
    }
    
    /* 表格 - 手机端卡片化（仅带 .table-card-mobile 类的表格生效） */
    .table-container {
        border-radius: var(--radius-sm);
    }
    
    .table-header {
        padding: 14px 16px;
        flex-direction: column;
        gap: 10px;
    }
    
    .table-header h3 {
        font-size: 0.95rem;
    }
    
    .table-actions {
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }
    
    .table-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 8px 14px;
        font-size: 0.85rem;
    }
    
    /* 仅 .table-card-mobile 在手机端变成卡片视图 */
    .table-card-mobile thead {
        display: none;
    }
    
    .table-card-mobile tbody,
    .table-card-mobile tr,
    .table-card-mobile td {
        display: block;
        width: 100%;
    }
    
    .table-card-mobile tr {
        margin-bottom: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 0;
        background: white;
    }
    
    .table-card-mobile td {
        padding: 10px 14px;
        border-bottom: 1px solid var(--border-light);
        text-align: right;
        position: relative;
        padding-left: 45%;
        font-size: 0.85rem;
    }
    
    .table-card-mobile td:last-child {
        border-bottom: none;
    }
    
    .table-card-mobile td::before {
        content: attr(data-label);
        position: absolute;
        left: 14px;
        width: 40%;
        text-align: left;
        font-weight: 600;
        font-size: 0.8rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    
    .table-card-mobile tr:last-child td {
        border-bottom: none;
    }
    
    .table-card-mobile .table-actions-cell {
        justify-content: flex-end;
        flex-direction: row;
    }
    
    .table-card-mobile .table-actions-cell .btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    /* 普通表格在手机上支持横向滚动 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table-responsive .table {
        min-width: 600px;
    }
    
    /* 图表 */
    .dashboard-charts {
        margin-bottom: 20px;
    }
    
    .chart-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .chart-card {
        padding: 16px;
    }
    
    .chart-card canvas {
        height: 200px !important;
    }
    
    /* 考试页面 */
    .exam-container {
        padding: 18px;
        margin: 14px 0;
    }
    
    .exam-header h2 {
        font-size: 1.1rem;
    }
    
    .exam-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .exam-info-item {
        font-size: 0.85rem;
    }
    
    .timer {
        font-size: 1.1rem;
    }
    
    .question-item {
        padding: 14px;
        margin-bottom: 16px;
    }
    
    .question-text {
        font-size: 0.95rem;
    }
    
    .option-item {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    
    /* 最近活动 */
    .recent-activity {
        padding: 18px;
    }
    
    .recent-activity h2 {
        font-size: 1rem;
        margin-bottom: 14px;
    }
    
    /* 空状态 */
    .empty-state {
        padding: 40px 16px;
    }
    
    .empty-state i {
        font-size: 2.5rem;
    }
    
    /* 页脚 */
    footer {
        padding: 16px 0;
        font-size: 0.8rem;
    }
}

/* ===== 超小屏优化 (≤400px) ===== */
@media (max-width: 400px) {
    .hero h1 {
        font-size: 1.3rem;
    }
    
    .hero-features {
        grid-template-columns: 1fr;
    }
    
    .rules {
        grid-template-columns: 1fr;
    }
    
    .dashboard-stats {
        grid-template-columns: 1fr 1fr;
    }
    
    .student-overview {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        padding: 12px 10px;
    }
    
    .stat-card i {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    
    .stat-card h3 {
        font-size: 1.2rem;
    }
    
    .logo span {
        font-size: 0.9rem;
    }
    
    .auth-card {
        padding: 18px 14px;
    }
}

/* ===== 横屏手机优化 ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 24px 0 20px;
    }
    
    .hero-features {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    .feature {
        padding: 12px 10px;
    }
    
    .feature i {
        font-size: 1.4rem;
        margin-bottom: 6px;
    }
    
    .feature h3 {
        font-size: 0.8rem;
    }
    
    .feature p {
        font-size: 0.75rem;
    }
    
    .dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .dashboard-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}