/**
 * 标题: MobileStyle
 * 说明: 移动端响应式适配样式
 * 时间: 2026-03-05
 * @author: zhoujunyu
 */

/* 仅在移动端显示的元素 */
.hidden-pc {
    display: none !important;
}

@media (max-width: 768px) {
    /* 覆盖隐藏显示 */
    .hidden-pc {
        display: flex !important;
    }

    /* 去掉整个应用容器以及内部面板在手机端的圆角和边缘阴影，全屏平铺显示更清爽 */
    .app-container, .main-content, .sidebar, .detail-panel {
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .app-container {
        margin: 0 !important;
        height: 100vh;
        width: 100vw;
    }

    /* 侧边栏全屏抽屉效果 (重新补上需要的阴影) */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 16px rgba(0,0,0,0.1);
        width: 280px;
        max-width: 85vw;
    }
    
    .sidebar.active {
        transform: translateX(0);
    }

    /* 侧边栏半透明遮罩 */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    .sidebar-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

    /* 汉堡菜单按钮样式 */
    .mobile-menu-btn {
        background: none;
        border: none;
        color: var(--text-primary);
        cursor: pointer;
        padding: 4px;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-menu-btn:active {
        background-color: var(--bg-hover);
    }

    /* 主页面头部间距调整 */
    .main-header {
        padding: 12px 16px;
        flex-direction: column; /* 改为垂直排列，避免图标和搜索框挤压 */
        align-items: stretch;
        gap: 16px;
    }

    .main-header > div:first-child {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 12px;
    }

    /* 搜索框独占一行显示 */
    .main-header .header-actions {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .search-wrapper {
        flex: 1; 
    }
    .search-input {
        width: 100%;
    }

    /* 添加任务工具栏：禁止换行，确保添加按钮在同一排 */
    .add-task-toolbar {
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto; /* 若屏幕过小，允许滑动看全部操作 */
        padding-bottom: 8px; /* 留出一点滑动条空间 */
    }
    .toolbar-actions {
        flex-wrap: nowrap;
        gap: 4px;
    }
    
    /* 缩小一下工具栏按钮，留出充足空间给添加按钮 */
    .toolbar-btn {
        padding: 4px;
        white-space: nowrap;
    }
    
    .add-submit-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* 隐藏表头，简化列表 */
    .task-list-header {
        display: none;
    }

    /* 任务列表项保持在一行：移动端紧凑显示 */
    .task-item {
        flex-wrap: nowrap;
        padding: 12px;
        align-items: center; /* 恢复垂直居中 */
        gap: 8px; /* 间距缩小一点 */
    }
    
    .task-content {
        min-width: 0;
        width: auto;
        margin-top: 0;
        flex: 1; /* 左侧占满剩余空间 */
    }
    
    .task-title-row {
        flex-wrap: nowrap; /* 不换行 */
        gap: 6px;
    }
    
    .task-tag, .task-category {
        white-space: nowrap; 
    }

    /* 优先级和时间根据内容自适应在右侧，均不换行 */
    .task-priority {
        margin: 0;
        width: auto; /* 不设定固定宽度 */
        flex-shrink: 0;
    }
    
    .task-date {
        margin: 0;
        width: auto; /* 不设定固定宽度 */
        text-align: right;
        flex-shrink: 0;
    }

    /* 右侧详情面板覆盖全屏 */
    .detail-panel {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        max-width: 100vw;
        z-index: 1100;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: none;
    }
    
    /* 通过 hidden 类控制开闭，由于使用了 display:none 可能会丢失动画，
       但能保证全屏覆盖和功能完整，后续可以优化 */
    .detail-panel:not(.hidden) {
        transform: translateX(0);
    }

    /* 各类弹窗（日历、标签、分类）在移动端居中显示 */
    .calendar-popup, .category-popup, .tag-popup {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 320px !important;
        z-index: 2000;
        box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    }
}