/* ========================================
   移动端优化 V7 - 全新用户交互友好界面
   ======================================== */

/* 仅在移动设备上应用这些样式 */
@media (max-width: 768px) {
    
    /* ========================================
       1. 顶部导航栏优化
       ======================================== */
    
    .header {
        height: auto;
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .header-left {
        flex: 1;
        min-width: 200px;
    }
    
    .platform-title {
        font-size: 16px;
    }
    
    .logo svg {
        width: 24px;
        height: 24px;
    }
    
    /* 隐藏中间的工具分类（移动端不需要） */
    .header-center {
        display: none;
    }
    
    .header-right {
        gap: 8px;
    }
    
    .user-info span {
        display: none; /* 只显示图标 */
    }
    
    .logout-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    /* ========================================
       2. 主导航栏 - 横向滚动
       ======================================== */
    
    .main-nav {
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    
    .main-nav::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    
    .nav-container {
        gap: 8px;
        padding: 8px 0;
    }
    
    .nav-item {
        padding: 8px 16px;
        font-size: 13px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* ========================================
       3. 主容器 - 改为垂直堆叠
       ======================================== */
    
    .main-container {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 140px);
        gap: 0;
    }
    
    /* ========================================
       4. 左侧边栏 - 改为全宽可折叠
       ======================================== */
    
    .sidebar {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        max-height: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    .sidebar-header {
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        user-select: none;
    }
    
    .sidebar-title {
        font-size: 15px;
        margin-bottom: 0;
    }
    
    /* 添加折叠指示器 */
    .sidebar-header::after {
        content: '▼';
        font-size: 12px;
        color: var(--text-secondary);
        transition: transform 0.3s ease;
    }
    
    .sidebar.collapsed .sidebar-header::after {
        transform: rotate(-90deg);
    }
    
    /* 搜索框在移动端隐藏（节省空间） */
    .search-box {
        display: none;
    }
    
    /* 侧边栏内容 - 可折叠 */
    .sidebar-content {
        max-height: 400px;
        overflow-y: auto;
        padding: 12px;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }
    
    .sidebar.collapsed .sidebar-content {
        max-height: 0;
        padding: 0 12px;
        overflow: hidden;
    }
    
    /* ========================================
       5. 功能项 - 优化触摸体验
       ======================================== */
    
    .function-item {
        padding: 14px 16px;
        margin-bottom: 8px;
        font-size: 14px;
        min-height: 48px; /* 确保足够的触摸区域 */
        touch-action: manipulation; /* 优化触摸响应 */
    }

    .function-item.function-parent {
        padding-right: 2px;
    }
    
    .function-item svg {
        width: 18px;
        height: 18px;
    }
    
    /* 父功能项 */
    .function-parent {
        font-size: 14px;
        font-weight: 600;
    }
    
    /* 子功能容器 - 横向滚动 */
    .sub-function-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding: 8px 0;
        margin: 8px 0 12px 0;
        scrollbar-width: none;
    }
    
    .sub-function-container::-webkit-scrollbar {
        display: none;
    }
    
    .sub-function-item {
        padding: 10px 2px 10px 16px;
        font-size: 13px;
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 40px;
        touch-action: manipulation;
    }
    
    /* ========================================
       6. 主内容区 - 全宽显示
       ======================================== */
    
    .content-area {
        width: 100%;
        min-height: 400px;
    }
    
    /* 阶段标签 - 取消卡片，文字直接显示 */
    .phase-tabs {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 8px;
        background: transparent;
    }
    
    .phase-tabs-left {
        flex: 1;
        gap: 12px;
        display: flex;
        align-items: center;
    }
    
    .phase-tab {
        flex: 0 0 auto;
        padding: 0 !important;
        font-size: 13px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: var(--text-secondary) !important;
        font-weight: normal !important;
        min-height: auto !important;
        white-space: nowrap !important;
    }
    
    .phase-tab.active {
        color: var(--accent-color) !important;
        font-weight: 600 !important;
        background: transparent !important;
        border: none !important;
    }
    
    .phase-tab span {
        display: inline;
    }
    
    .phase-tab svg {
        display: none; /* 隐藏图标 */
    }
    
    /* 版本切换 - 取消卡片，文字直接显示 */
    .phase-tabs-right {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }
    
    .version-switch {
        width: 100%;
        justify-content: center;
        gap: 12px;
        display: flex;
        align-items: center;
    }
    
    .version-btn {
        flex: 0 0 auto;
        padding: 0 !important;
        font-size: 13px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: var(--text-secondary) !important;
        font-weight: normal !important;
        min-height: auto !important;
        white-space: nowrap !important;
    }
    
    .version-btn.active {
        color: var(--accent-color) !important;
        font-weight: 600 !important;
        background: transparent !important;
        border: none !important;
    }
    
    /* 功能内容区 */
    .function-content {
        padding: 16px;
    }
    
    .empty-state {
        padding: 40px 20px;
    }
    
    .empty-icon {
        width: 80px;
        height: 80px;
    }
    
    .empty-text {
        font-size: 14px;
    }
    
    /* ========================================
       7. 表单优化 - 两列布局
       ======================================== */
    
    .function-form {
        padding: 0;
    }
    
    .form-section {
        margin-bottom: 20px;
    }
    
    .form-section h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }
    
    /* 移动端竖屏：两列布局 */
    .form-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 10px;
        padding: 0;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-label {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    .form-input,
    .form-select {
        padding: 12px 14px;
        font-size: 14px;
        min-height: 44px; /* 确保足够的触摸区域 */
    }
    
    /* ========================================
       8. 按钮优化 - 全宽布局
       ======================================== */
    
    .action-buttons {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
        justify-content: center;
        min-height: 48px;
        touch-action: manipulation;
    }
    
    .btn svg {
        width: 18px;
        height: 18px;
    }
    
    /* ========================================
       9. 详情面板优化
       ======================================== */
    
    .detail-panel {
        margin-top: 20px;
    }
    
    .detail-panel-header {
        padding: 14px 16px;
        min-height: 48px;
        touch-action: manipulation;
    }
    
    .detail-panel-title {
        font-size: 14px;
    }
    
    .detail-panel-toggle {
        font-size: 13px;
        padding: 6px 10px;
    }
    
    .detail-panel-content {
        padding: 16px;
        font-size: 13px;
        max-height: 400px;
    }
    
    /* ========================================
       10. 右侧面板 - 改为底部面板
       ======================================== */
    
    .right-panel {
        width: 100%;
        max-width: 100%;
        border-left: none;
        border-top: 2px solid var(--border-color);
        padding: 16px;
        max-height: none;
        min-height: auto;
    }
    
    .panel-text {
        font-size: 13px;
        margin-bottom: 16px;
    }
    
    .right-panel-results {
        width: 100%;
    }
    
    .right-panel-result-section {
        margin-bottom: 16px;
        padding: 14px;
    }
    
    .right-panel-result-title {
        font-size: 14px;
        padding: 12px 14px;
        min-height: 44px;
        touch-action: manipulation;
    }
    
    .right-panel-result-content {
        font-size: 13px;
    }
    
    .right-panel-result-item {
        padding: 10px 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .right-panel-result-label,
    .right-panel-result-value {
        font-size: 13px;
    }
    
    /* ========================================
       11. 计算结果优化
       ======================================== */
    
    .calculation-section {
        margin-bottom: 20px;
    }
    
    .section-title {
        font-size: 14px;
        margin-bottom: 12px;
    }
    
    .calculation-items-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    .calculation-item {
        padding: 12px;
    }
    
    .calc-label {
        font-size: 13px;
    }
    
    .calc-formula {
        font-size: 12px;
    }
    
    .calc-result {
        font-size: 13px;
    }
    
    /* ========================================
       12. 规范依据优化
       ======================================== */
    
    .code-standard {
        padding: 12px;
        margin-bottom: 16px;
    }
    
    .code-standard-title {
        font-size: 14px;
    }
    
    .code-standard-number {
        font-size: 11px;
    }
    
    .code-tabs {
        gap: 6px;
        margin-bottom: 12px;
    }
    
    .code-tab {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .article-title {
        font-size: 13px;
    }
    
    .regulation-item {
        padding: 10px;
        gap: 10px;
    }
    
    .regulation-number {
        font-size: 13px;
    }
    
    .regulation-title {
        font-size: 12px;
    }
    
    .regulation-text {
        font-size: 12px;
    }
    
    /* 表格优化 - 横向滚动 */
    .code-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .regulation-table {
        min-width: 500px;
        font-size: 11px;
    }
    
    .regulation-table th,
    .regulation-table td {
        padding: 8px 10px;
    }
    
    /* ========================================
       13. 建议项优化
       ======================================== */
    
    .suggestion-item {
        padding: 12px;
        margin-bottom: 10px;
        font-size: 13px;
    }
    
    .suggestion-header {
        gap: 6px;
    }
    
    .suggestion-icon {
        font-size: 16px;
    }
    
    .suggestion-title {
        font-size: 13px;
    }
    
    .suggestion-content {
        font-size: 12px;
        padding-left: 22px;
    }
    
    /* ========================================
       14. 触摸优化
       ======================================== */
    
    /* 增加所有可点击元素的触摸区域 */
    button,
    .function-item,
    .sub-function-item,
    .phase-tab,
    .nav-item,
    .detail-panel-header,
    .right-panel-result-title {
        -webkit-tap-highlight-color: rgba(52, 152, 219, 0.2);
        touch-action: manipulation;
    }
    
    /* 防止双击缩放 */
    * {
        touch-action: manipulation;
    }
    
    /* ========================================
       15. 性能优化
       ======================================== */
    
    /* 使用硬件加速 */
    .sidebar-content,
    .sub-function-container,
    .main-nav,
    .code-table {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: scroll-position;
    }
    
    /* 优化滚动性能 */
    .sidebar-content,
    .function-content,
    .right-panel,
    .detail-panel-content {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
}

/* ========================================
   16. 超小屏幕优化 (≤480px)
   ======================================== */

@media (max-width: 480px) {
    .header {
        padding: 10px 12px;
    }
    
    .platform-title {
        font-size: 14px;
    }
    
    .nav-item {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    /* 超小屏幕不修改phase-tab样式，保持纯文字显示 */
    
    .function-item {
        padding: 12px 14px;
        font-size: 13px;
    }

    .function-item.function-parent {
        padding-right: 2px;
    }
    
    .form-input,
    .form-select {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .btn {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* ========================================
   17. 横屏模式优化 - 两栏布局
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    /* 横屏时采用两栏布局：左侧导航 + 右侧内容 */
    
    /* 顶部导航栏压缩 */
    .header {
        padding: 6px 12px;
        min-height: 48px;
    }
    
    .main-nav {
        padding: 0 12px;
    }
    
    .nav-container {
        padding: 4px 0;
    }
    
    .nav-item {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    /* 主容器改为横向布局 */
    .main-container {
        flex-direction: row !important;
        height: calc(100vh - 100px);
        min-height: auto;
    }
    
    /* 左侧边栏：宽度由 layout.js 按当前专业文本动态计算 */
    .sidebar {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 100%;
        max-height: 100%;
        border-right: 1px solid var(--border-color);
        border-bottom: none;
        overflow-y: auto;
    }
    
    .sidebar-header {
        padding: 12px;
        cursor: default;
        pointer-events: none;
    }
    
    /* 横屏时侧边栏不可折叠 */
    .sidebar-header::after {
        display: none;
    }
    
    .sidebar-content {
        max-height: none !important;
        height: auto;
        padding: 8px !important;
        display: block !important;
        overflow-y: auto;
    }
    
    /* 搜索框在横屏时显示 */
    .search-box {
        display: flex;
        margin-bottom: 12px;
    }
    
    /* 功能项优化 */
    .function-item {
        padding: 10px 12px;
        font-size: 13px;
        margin-bottom: 6px;
    }

    .function-item.function-parent {
        padding-right: 2px;
    }
    
    /* 子功能改为垂直列表 */
    .sub-function-container {
        display: flex;
        flex-direction: column !important;
        overflow-x: visible;
        overflow-y: visible;
        gap: 6px;
        padding: 0;
        margin: 8px 0 12px 0;
    }
    
    .sub-function-item {
        padding: 8px 2px 8px 12px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 1;
        min-height: 36px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 右侧内容区：占据剩余空间 */
    .content-area {
        flex: 1;
        width: auto;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    
    /* 阶段标签和版本切换横向显示在同一行 - 使用更高特异性选择器 */
    .phase-tabs {
        padding: 8px 12px !important;
        flex-shrink: 0 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        background: transparent !important;
    }
    
    .phase-tabs .phase-tabs-left {
        flex: 0 0 auto !important;
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
    }
    
    /* 使用更高特异性：.phase-tabs .phase-tab */
    .phase-tabs .phase-tab {
        flex: 0 0 auto !important;
        padding: 0 !important;
        font-size: 13px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: var(--text-secondary) !important;
        font-weight: normal !important;
        min-height: auto !important;
        min-width: auto !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }
    
    .phase-tabs .phase-tab.active {
        color: var(--accent-color) !important;
        font-weight: 600 !important;
        background: transparent !important;
        border: none !important;
    }
    
    .phase-tabs .phase-tab svg {
        display: none !important; /* 隐藏图标 */
    }
    
    /* 版本切换在同一行显示 - 使用更高特异性选择器 */
    .phase-tabs .phase-tabs-right {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-top: 0 !important;
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
    }
    
    .phase-tabs .version-switch {
        width: auto !important;
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
    }
    
    /* 使用更高特异性：.phase-tabs-right .version-btn */
    .phase-tabs-right .version-btn {
        flex: 0 0 auto !important;
        padding: 0 !important;
        font-size: 13px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: var(--text-secondary) !important;
        font-weight: normal !important;
        min-height: auto !important;
        min-width: auto !important;
        max-width: none !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }
    
    .phase-tabs-right .version-btn.active {
        color: var(--accent-color) !important;
        font-weight: 600 !important;
        background: transparent !important;
        border: none !important;
    }
    
    /* 功能内容区 */
    .function-content {
        padding: 12px;
        flex: 1;
        overflow-y: auto;
    }
    
    /* 表单保持两列布局 */
    .form-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px 8px;
    }
    
    .form-group {
        margin-bottom: 12px;
    }
    
    .form-label {
        font-size: 12px;
        margin-bottom: 4px;
    }
    
    .form-input,
    .form-select {
        padding: 8px 10px;
        font-size: 13px;
        min-height: 36px;
    }
    
    /* 按钮改为横向排列 */
    .action-buttons {
        flex-direction: row !important;
        gap: 8px;
        margin-top: 16px;
        margin-bottom: 16px;
    }
    
    .btn {
        flex: 1;
        padding: 10px 16px;
        font-size: 13px;
        min-height: 40px;
    }
    
    /* 详情面板压缩 */
    .detail-panel {
        margin-top: 16px;
    }
    
    .detail-panel-header {
        padding: 10px 12px;
        min-height: 40px;
    }
    
    .detail-panel-title {
        font-size: 13px;
    }
    
    .detail-panel-content {
        padding: 12px;
        font-size: 12px;
        max-height: 300px;
    }
    
    /* 右侧面板：显示在规范依据下方 */
    .right-panel {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        border-top: none;
        border-left: none;
        padding: 0;
        margin-top: 16px;
    }
    
    /* 计算结果显示在规范依据下方 */
    .right-panel-results {
        width: 100%;
        margin-top: 0;
    }
    
    .right-panel-result-section {
        margin-bottom: 12px;
        padding: 10px;
    }
    
    .right-panel-result-title {
        font-size: 13px;
        padding: 8px 10px;
        min-height: 36px;
    }
    
    .right-panel-result-content {
        font-size: 12px;
    }
    
    /* 空状态优化 */
    .empty-state {
        padding: 30px 20px;
    }
    
    .empty-icon {
        width: 60px;
        height: 60px;
    }
    
    .empty-text {
        font-size: 13px;
    }
}