/* 移动端适配样式 */

/* 移动端媒体查询 */
@media (max-width: 768px) {
    :root {
        --header-height: 56px;
        --sidebar-width: 280px;
    }

    /* 头部适配 */
    .header {
        height: var(--header-height);
        padding: 0 16px;
        position: relative;
    }

    .logo {
        font-size: 18px;
        margin-right: 16px;
    }

    /* 添加汉堡菜单按钮 */
    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 20px;
        color: var(--primary-color);
        cursor: pointer;
        padding: 8px;
        margin-right: 16px;
    }

    /* 主容器适配 */
    .main-container {
        margin-top: var(--header-height);
        height: calc(100vh - var(--header-height));
    }

    /* 侧边栏移动端样式 */
    .sidebar {
        position: fixed;
        left: -100%;
        top: var(--header-height);
        width: var(--sidebar-width);
        height: calc(100vh - var(--header-height));
        background-color: white;
        box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.15);
        transition: left 0.3s ease;
        z-index: 999;
        overflow-y: auto;
    }

    .sidebar.show {
        left: 0;
    }

    /* 侧边栏遮罩层 */
    .sidebar-overlay {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    /* 主内容区适配 */
    .content {
        width: 100%;
        padding: 16px;
        margin-left: 0;
    }

    /* 卡片适配 */
    .card {
        margin-bottom: 16px;
        border-radius: 8px;
    }

    .card-header {
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .card-body {
        padding: 16px;
    }

    /* 统计卡片适配 */
    .stats-container {
        margin: 0 0 16px;
    }

    .stats-container > div {
        margin: 0 0 16px;
        min-width: 100%;
    }

    .stats-card {
        padding: 16px;
        margin-bottom: 16px;
    }

    .stats-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
        margin-right: 12px;
    }

    .stats-info h3 {
        font-size: 20px;
    }

    .stats-info p {
        font-size: 12px;
    }

    /* 表格适配 */
    .table-responsive {
        border-radius: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        font-size: 12px;
        min-width: 600px;
    }

    .table th,
    .table td {
        padding: 8px 6px;
        white-space: nowrap;
    }

    .table th {
        font-size: 11px;
        font-weight: 600;
    }

    /* 按钮适配 */
    .btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    .btn-sm {
        padding: 4px 8px;
        font-size: 11px;
    }

    /* 搜索框适配 */
    .search-box {
        margin-bottom: 16px;
    }

    .search-box input {
        padding: 8px 10px;
        font-size: 14px;
    }

    .search-box button {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* 分页适配 */
    .pagination {
        justify-content: center;
        margin-top: 16px;
        flex-wrap: wrap;
    }

    .pagination a {
        padding: 6px 10px;
        font-size: 12px;
        margin: 2px;
    }

    /* 标签适配 */
    .badge {
        padding: 2px 6px;
        font-size: 10px;
    }

    .tag {
        padding: 2px 6px;
        font-size: 10px;
        margin-right: 4px;
        margin-bottom: 4px;
    }

    /* 面包屑导航适配 */
    .breadcrumb {
        margin-bottom: 16px;
        font-size: 12px;
        flex-wrap: wrap;
    }

    /* 时间线适配 */
    .timeline-item {
        flex-direction: column;
        margin-bottom: 20px;
    }

    .timeline-date {
        width: 100%;
        text-align: left;
        padding-right: 0;
        padding-bottom: 8px;
        font-weight: 600;
        color: var(--primary-color);
    }

    .timeline-content {
        padding-left: 0;
        border-left: none;
        border-top: 2px solid #f0f0f0;
        padding-top: 12px;
    }

    /* 文章列表适配 */
    .article-list {
        flex-direction: column;
        height: auto;
    }

    .article-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        max-height: 300px;
        margin-bottom: 16px;
    }

    .article-content {
        padding: 16px;
    }

    .article-header {
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .article-header h2 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .article-meta {
        flex-direction: column;
        gap: 8px;
    }

    .article-meta div {
        margin-right: 0;
    }

    /* 排序方向切换适配 */
    .sort-direction {
        justify-content: flex-start;
        margin-bottom: 12px;
        font-size: 12px;
    }

    .sort-direction span {
        margin-right: 8px;
    }

    /* 图例适配 */
    .legend {
        flex-wrap: wrap;
        margin-bottom: 12px;
    }

    .legend-item {
        margin-right: 12px;
        margin-bottom: 8px;
        font-size: 12px;
    }

    .legend-color {
        width: 12px;
        height: 12px;
        margin-right: 6px;
    }

    /* 状态样式适配 */
    .empty-state,
    .loading-state,
    .error-state {
        padding: 32px 16px;
    }

    .empty-state i,
    .error-state i {
        font-size: 36px;
        margin-bottom: 12px;
    }

    .loading-state i {
        font-size: 20px;
    }

    /* 设计说明适配 */
    .design-notes {
        padding: 12px;
        margin-top: 16px;
    }

    .design-notes h3 {
        font-size: 14px;
    }

    .design-notes ul {
        font-size: 12px;
    }

    /* 选项卡适配 */
    .tabs {
        margin-bottom: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab {
        padding: 10px 12px;
        margin-right: 16px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* 账户信息适配 */
    .account-avatar {
        width: 40px;
        height: 40px;
        margin-right: 12px;
        font-size: 20px;
    }

    .account-info h4 {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .account-info p {
        font-size: 11px;
    }

    .account-meta {
        font-size: 10px;
        margin-top: 6px;
    }

    .account-meta div {
        margin-right: 12px;
    }
}

/* 超小屏幕适配 (小于480px) */
@media (max-width: 480px) {
    .header {
        padding: 0 12px;
    }

    .logo {
        font-size: 16px;
        margin-right: 12px;
    }

    .content {
        padding: 12px;
    }

    .card-header,
    .card-body {
        padding: 12px;
    }

    .stats-card {
        padding: 12px;
    }

    .table {
        font-size: 11px;
        min-width: 500px;
    }

    .table th,
    .table td {
        padding: 6px 4px;
    }

    .btn {
        padding: 5px 10px;
        font-size: 11px;
    }

    .btn-sm {
        padding: 3px 6px;
        font-size: 10px;
    }

    .pagination a {
        padding: 5px 8px;
        font-size: 11px;
    }

    .sidebar {
        width: 260px;
    }
}

/* 桌面端隐藏移动端元素 */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none;
    }

    .sidebar-overlay {
        display: none;
    }
}