/* 响应式设计样式 */

/* 移动设备优先设计 */

/* 超小屏幕 (手机, <576px) */
@media (max-width: 575.98px) {
    /* 容器宽度 */
    .container {
        padding: 0 1rem;
    }
    
    /* 导航栏 */
    #navbar .container {
        padding: 0.5rem 1rem;
    }
    
    #navbar h1 {
        font-size: 1.25rem;
    }
    
    /* 页脚 */
    footer {
        padding: 1.5rem 0;
    }
    
    footer .grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* 卡片 */
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    /* 按钮 */
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* 表单 */
    .form-control {
        font-size: 0.875rem;
        padding: 0.625rem;
    }
    
    /* 标题 */
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    /* 文本 */
    p {
        font-size: 0.875rem;
        line-height: 1.5;
    }
    
    /* 图片 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 表格 */
    table {
        font-size: 0.875rem;
    }
    
    /* 隐藏移动端不需要的元素 */
    .desktop-only {
        display: none !important;
    }
}

/* 小屏幕 (平板, 576px - 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* 容器宽度 */
    .container {
        max-width: 540px;
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    /* 页脚 */
    footer .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* 隐藏小屏幕不需要的元素 */
    .large-screen-only {
        display: none !important;
    }
}

/* 中等屏幕 (桌面, 768px - 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* 容器宽度 */
    .container {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    /* 页脚 */
    footer .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* 大屏幕 (桌面, 992px - 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* 容器宽度 */
    .container {
        max-width: 960px;
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    /* 页脚 */
    footer .grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

/* 超大屏幕 (桌面, >=1200px) */
@media (min-width: 1200px) {
    /* 容器宽度 */
    .container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    /* 页脚 */
    footer .grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem;
    }
}

/* 横屏设备 */
@media (orientation: landscape) and (max-height: 575.98px) {
    /* 调整导航栏高度 */
    #navbar {
        padding: 0.5rem 0;
    }
    
    /* 调整页脚 */
    footer {
        padding: 1rem 0;
    }
    
    /* 调整卡片 */
    .card {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
}

/* 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* 优化图标显示 */
    .fa {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* 优化图片显示 */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 减少动画 (用户可能开启了减少动画设置) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* 禁用加载动画 */
    .loading-spinner {
        animation: none;
        border: 4px solid #2D6A4F;
        border-radius: 50%;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    /* 基础颜色 */
    body {
        background-color: #121212;
        color: #E0E0E0;
    }
    
    /* 卡片 */
    .card {
        background-color: #1E1E1E;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    /* 链接 */
    a {
        color: #81C784;
    }
    
    a:hover {
        color: #FFB74D;
    }
    
    /* 表单 */
    .form-control {
        background-color: #2C2C2C;
        border-color: #444;
        color: #E0E0E0;
    }
    
    .form-control:focus {
        border-color: #81C784;
        box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.2);
    }
    
    /* 按钮 */
    .btn-primary {
        background-color: #4CAF50;
    }
    
    .btn-primary:hover {
        background-color: #45a049;
    }
    
    /* 面包屑 */
    .breadcrumb {
        color: #999;
    }
    
    .breadcrumb a {
        color: #81C784;
    }
    
    /* 提示信息 */
    .error-message {
        background-color: rgba(244, 67, 54, 0.1);
        color: #EF5350;
        border-color: rgba(244, 67, 54, 0.2);
    }
    
    .success-message {
        background-color: rgba(76, 175, 80, 0.1);
        color: #66BB6A;
        border-color: rgba(76, 175, 80, 0.2);
    }
    
    .warning-message {
        background-color: rgba(255, 193, 7, 0.1);
        color: #FFCA28;
        border-color: rgba(255, 193, 7, 0.2);
    }
}