/* ============================================================
   MOOER PLM - 全局响应式适配层 (Responsive & Adaptive)
   适用：所有引用本文件的页面（桌面端不受影响，规则均限定在媒体查询内）
   设计目标：
     1. 移动端基础重置（图片缩放、输入框 16px 防 iOS 自动放大、触摸目标 ≥40px）
     2. 侧边栏 / 双栏布局在手机端堆叠为全宽，平板端收窄
     3. 卡片 / 表格 / 模态框 / 按钮 / KPI 流式自适应
     4. 竖屏与横屏均可正常使用
   ============================================================ */

/* ===== 0. 基础复位（全局，不影响桌面布局） ===== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 媒体元素永远不超出视口 */
img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}

/* 防止任何溢出导致横向滚动条 */
body { overflow-x: hidden; }

/* 移动端抽屉元素：默认隐藏，仅 ≤768px 由下方媒体查询显示（避免桌面端占位） */
.drawer-toggle,
.drawer-overlay { display: none; }

/* 输入框 / 下拉 / 文本域字体 ≥16px：避免 iOS Safari 聚焦时自动放大页面 */
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
select, textarea {
    font-size: 16px;
}

/* ===== 1. 触摸友好（全局，仅设最小高度，不影响桌面外观） ===== */
button,
.btn,
.nav-item,
.tab,
a.btn,
.badge-btn {
    min-height: 40px;
}
.sidebar-nav a,
.nav-item,
.role-tree-node-header {
    min-height: 40px;
    display: flex;
    align-items: center;
}
input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
}

/* ============================================================
   2. 平板 (≤1024px)：收窄侧边栏、压缩留白，仍保持左右布局
   ============================================================ */
@media (max-width: 1024px) {
    .plm-sidebar,
    .sidebar,
    .role-sidebar {
        width: 220px !important;
        max-width: 220px !important;
    }
    .container { padding: 16px !important; }
    .card-body { padding: 16px !important; }
    .card-header {
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px;
    }
    .kpi-row {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    /* 平板：看板 2 列 */
    .kanban-board {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .header { flex-wrap: wrap !important; gap: 8px; }
}

/* ============================================================
   3. 手机 (≤768px)：布局堆叠为单列，侧边栏变顶部全宽面板
   ============================================================ */
@media (max-width: 768px) {
    /* ---- 3.1 布局容器：行 → 列 ---- */
    .layout,
    .role-layout,
    .plm-layout {
        flex-direction: column !important;
    }

    /* ---- 3.2 侧边栏：移动端改为「默认隐藏的抽屉」，点击汉堡按钮滑出 ---- */
    .sidebar,
    .role-sidebar,
    .plm-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100% !important;
        max-height: 100% !important;
        width: 84% !important;
        max-width: 320px !important;
        z-index: 1050 !important;
        transform: translateX(-100%);
        /* 收起态：彻底去掉边框/阴影/圆角，避免左侧残留一条边框占用视觉位置 */
        border-right: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: transform .28s ease;
        flex: none !important;
    }
    /* 抽屉展开态：恢复边框/阴影 */
    .sidebar.drawer-open,
    .role-sidebar.drawer-open,
    .plm-sidebar.drawer-open {
        transform: translateX(0) !important;
        border-right: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45) !important;
    }
    /* 遮罩层：点击关闭抽屉 */
    .drawer-overlay {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease;
    }
    .drawer-overlay.drawer-open {
        opacity: 1;
        visibility: visible;
    }
    /* 浮动汉堡触发按钮：仅移动端显示 */
    .drawer-toggle {
        display: flex !important;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1060;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--bg-card);
        color: var(--text);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }
    .drawer-toggle i {
        display: block;
        position: relative;
        width: 20px;
        height: 2px;
        background: currentColor;
    }
    .drawer-toggle i::before,
    .drawer-toggle i::after {
        content: '';
        position: absolute;
        left: 0;
        width: 20px;
        height: 2px;
        background: currentColor;
    }
    .drawer-toggle i::before { top: -6px; }
    .drawer-toggle i::after { top: 6px; }
    /* 顶栏 / 标签栏为汉堡按钮留位，避免遮挡（主内容区无需左缩进，避免内容被推窄） */
    .header,
    .tabs,
    .main,
    .main-content,
    .role-main {
        padding-left: 52px !important;
    }

    /* ---- 3.3 主内容区：占满宽度 ---- */
    .main-content,
    .role-main,
    .plm-main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* ---- 3.4 容器 / 卡片留白压缩 ---- */
    .container { padding: 12px !important; }
    .card-body { padding: 14px !important; }
    .card-header {
        padding: 12px 14px !important;
        flex-wrap: wrap !important;
        gap: 8px;
    }
    .header { flex-wrap: wrap !important; gap: 8px; }

    /* ---- 3.5 顶栏按钮组：自动换行，主操作占满 ---- */
    .header .btn,
    .toolbar .btn,
    .actions .btn {
        flex: 1 1 auto;
    }

    /* ---- 3.6 按钮：加大触摸高度 ---- */
    .btn { min-height: 42px; padding: 10px 16px; }
    .btn-sm { min-height: 38px; }

    /* ---- 3.7 表格：缩小内边距 + 横向滚动容器 ---- */
    .data-table { font-size: 12px; }
    .data-table th,
    .data-table td {
        padding: 8px 10px !important;
        white-space: nowrap;
    }
    .table-wrap,
    .card-body,
    .main-content,
    .role-main,
    .plm-main {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- 3.8 KPI 卡片：更密的自适应网格 ---- */
    .kpi-row,
    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
    }
    .kpi-card { padding: 14px !important; }
    .kpi-value { font-size: 22px !important; }

    /* ---- 3.9 模态框：改为底部抽屉 (bottom sheet) ---- */
    .modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }
    .modal {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        max-height: 92vh !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6) !important;
    }
    .modal-header { padding: 16px !important; }
    .modal-body { padding: 16px !important; }
    .modal-footer {
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
    }
    .modal-footer .btn { flex: 1 1 auto; }

    /* ---- 3.10 部门管理双栏 (plm_roles.html) 堆叠 ---- */
    #dept-combined-panel .card-body {
        flex-direction: column !important;
        gap: 12px !important;
    }
    #dept-combined-panel .card-body > div:first-child {
        width: auto !important;
        max-width: 100% !important;
        border-right: none !important;
        padding-right: 0 !important;
        max-height: 40vh !important;
        overflow-y: auto !important;
    }
    #dept-combined-panel .card-body > div:last-child {
        max-height: none !important;
        overflow: visible !important;
    }

    /* ---- 3.10b 看板（Kanban）：手机端单列纵向堆叠，避免 4 列挤成细线框 ---- */
    .kanban-board {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .kanban-col {
        min-height: auto !important;
    }
    .kanban-col-body {
        /* 单列堆叠时卡片自然展开，去掉内层固定高度滚动 */
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* ---- 3.10c 弹窗 / 表单内布局：手机端改为单列、允许换行，避免横向溢出被裁切 ---- */
    .form-grid,
    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: 1fr !important;
    }
    .flex-between {
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    .modal-body {
        overflow-x: hidden !important;
    }

    /* ---- 3.11 通用 flex 行：允许换行，避免溢出 ---- */
    div[style*="display:flex"],
    div[style*="display: flex"] {
        flex-wrap: wrap !important;
    }

    /* ---- 3.12 树形 / 列表节点：触摸高度 ---- */
    .role-tree-node-header { min-height: 40px; }
}

/* ============================================================
   4. 超小屏手机 (≤480px)：进一步压缩
   ============================================================ */
@media (max-width: 480px) {
    .container { padding: 10px !important; }
    .card-body { padding: 12px !important; }
    .kpi-row,
    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
    /* 仅对顶栏 / 工具栏 / 弹窗底部的主操作按钮做全宽，避免破坏表格内的小操作按钮 */
    .header .btn,
    .toolbar .btn,
    .actions .btn,
    .modal-footer .btn {
        width: 100%;
    }
    .header { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   5. 横屏手机 (≤768px 且 landscape)：复用竖屏规则，
      仅把侧边栏限高压低，充分利用横向空间
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
    #dept-combined-panel .card-body > div:first-child {
        max-height: 32vh !important;
    }
}

/* ============================================================
   6. 项目详情弹窗 移动端适配
   ============================================================ */
@media (max-width: 768px) {
    /* 项目详情弹窗：让所有内容在弹窗 body 里自然滚动 */
    #psd-modal-body.psd-fixed-layout,
    #psd-modal-body {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
    }
    /* 去掉内部 flex，让三部分按文档流排列 */
    .psd-sticky-top {
        flex-shrink: unset !important;
        position: static !important;
    }
    .psd-scroll-area {
        flex: unset !important;
        overflow-y: visible !important;
        max-height: none !important;
    }
    /* 弹窗 modal-body 本身可滚动 */
    .modal-body#psd-modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 阶段负责人：4列 → 2列 */
    .sd-owner-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .sd-owner-card {
        padding: 8px !important;
    }
    .sd-owner-card-title {
        font-size: 11px !important;
    }

    /* 子阶段负责人行：更紧凑 */
    .sd-subnode-owner-row {
        padding: 5px 6px !important;
        gap: 6px !important;
    }
    .sd-subnode-owner-name {
        width: 65px !important;
        font-size: 11px !important;
    }
    .sd-subnode-owner-fields {
        gap: 4px !important;
        min-width: 0 !important;
    }
    .sd-subnode-owner-fields select {
        font-size: 11px !important;
        padding: 3px 4px !important;
        min-width: 50px !important;
    }

    /* 状态行：纵向堆叠 */
    .sd-status-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* 信息网格：单列 */
    .sd-info-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* 子阶段标签页：横向滚动 */
    .sd-subnode-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 4px !important;
        padding: 4px !important;
        margin: 4px 0 !important;
    }
    .sd-subnode-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    /* 弹窗底部按钮：全宽 */
    .sd-modal-footer {
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 12px !important;
        padding-top: 10px !important;
    }
    .sd-modal-footer-right {
        flex-direction: column !important;
        width: 100% !important;
    }
    .sd-modal-footer-right .btn {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* 阶段负责人：单列 */
    .sd-owner-grid {
        grid-template-columns: 1fr !important;
    }
}