/* SignFlow 响应式层 | 全站 @media 集中于此，最后加载
   断点：1024 / 768 / 600 / 400 / 375（窄屏优先）
   依赖：tokens.css → base.css → components.css → pages.css */
/* === 签名弹窗强制横屏布局（不旋转canvas，仅旋转文字元素） === */
@media screen and (max-width: 767px) {
    .sig-modal-content.force-landscape {
        position: relative;
        padding: 10px 52px !important;
    }

    /* 标题：绝对定位左侧，旋转-90° */
    .sig-modal-content.force-landscape > .modal-title {
        position: absolute !important;
        left: 4px;
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
        white-space: nowrap;
        font-size: 15px;
        margin: 0 !important;
        letter-spacing: 1px;
    }

    /* 画布区域：占满中间，不旋转 */
    .sig-modal-content.force-landscape > .signature-pad-wrapper {
        height: calc(100dvh - 120px) !important;
        margin-bottom: 8px;
    }

    /* 工具栏（清除/输入按钮）：底部正常方向 */
    .sig-modal-content.force-landscape > .sig-toolbar {
        flex-shrink: 0;
        margin-bottom: 0 !important;
    }

    /* 操作按钮：绝对定位右侧，旋转-90° */
    .sig-modal-content.force-landscape > .modal-actions {
        position: absolute !important;
        right: 4px;
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
        white-space: nowrap;
        gap: 20px;
        margin: 0 !important;
    }

    /* 隐藏输入模式区域（横屏下不便使用） */
    .sig-modal-content.force-landscape > #type-sig-area {
        display: none !important;
    }

    /* 水印文字旋转-90°，横屏方向可读 */
    .sig-modal-content.force-landscape .sig-watermark-rotate {
        transform: rotate(-90deg);
    }
}

/* 预览弹窗移动端适配 */
@media (max-width: 768px) {
    #preview-modal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0;
        padding: 16px 12px;
    }
    #preview-iframe {
        border-radius: var(--radius-sm);
    }

/* 批量创建任务弹窗：内容多时支持弹窗内滚动（避免溢出视口） */
#batch-assignment-modal {
    align-items: flex-start;
    padding-top: 4vh;
    overflow: hidden;
}

/* modal-content 必须是 flex column + 固定高度，才能让内部 #ba-rounds 触发滚动 */
#batch-assignment-modal .modal-content {
    height: 85vh;                /* 固定高度 */
    max-height: 85vh;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;            /* 自身不滚，让内部 ba-rounds 滚 */
    overscroll-behavior: contain;
}

/* 让 modal-actions 永远贴在底部 */
#batch-assignment-modal .modal-actions {
    margin-top: auto;
    flex-shrink: 0;
    background: var(--bg-secondary);
    padding-top: 12px;
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-up);
}

/* 关键：#ba-rounds 占用中间所有可用空间，超出可滚动 */
#batch-assignment-modal #ba-rounds {
    flex: 1 1 auto;              /* 占据剩余空间 */
    min-height: 0;               /* flex 子元素必须 0 才能正确收缩 */
    overflow-y: auto;            /* 仅在内容超出时显示滚动条 */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-tertiary);
    overscroll-behavior: contain;
    padding-right: 6px;
}
#batch-assignment-modal #ba-rounds::-webkit-scrollbar {
    width: 12px;
}
#batch-assignment-modal #ba-rounds::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 6px;
    border: 2px solid var(--bg-secondary);
}
#batch-assignment-modal #ba-rounds::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 6px;
}

/* 单轮模式的行容器 */
#batch-assignment-modal #ba-rows {
    max-height: 55vh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-tertiary);
    padding-right: 6px;
}
#batch-assignment-modal #ba-rows::-webkit-scrollbar {
    width: 12px;
}
#batch-assignment-modal #ba-rows::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 6px;
    border: 2px solid var(--bg-secondary);
}
#batch-assignment-modal #ba-rows::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 6px;
}

/* 滚动提示：当内容多时显示一个 fade 阴影提示可滚动 */
#batch-assignment-modal .modal-scroll-hint {
    position: sticky;
    top: 0;
    height: 6px;
    margin: -6px 0 0;
    background: var(--scroll-fade);
    pointer-events: none;
    z-index: 1;
}
#batch-assignment-modal .modal-actions {
    background: var(--bg-secondary);
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-up);
}

/* 移动端更紧凑 */
@media (max-width: 768px) {
    #batch-assignment-modal {
        padding-top: 2vh;
    }
    #batch-assignment-modal .modal-content {
        max-height: 94vh;
    }
}
}

/* === 响应式 === */
@media (max-width: 1024px) {
    .editor-layout {
        flex-direction: column;
        height: auto;
    }
    .editor-sidebar {
        width: 100%;
        max-height: none;
    }
    .editor-main {
        min-height: 600px;
    }
}

/* === 响应式 768 A === */
@media (max-width: 768px) {
    .container {
        padding: 16px;
    }
    .page-title {
        font-size: 22px;
    }
    .doc-grid {
        grid-template-columns: 1fr;
    }
    .navbar {
        padding: 12px 16px;
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .share-box {
        flex-direction: column;
    }
}

/* === 响应式 600 === */
@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* === 响应式 768 B === */
@media (max-width: 768px) {
    /* 签署页面移动端 */
    .signing-container {
        padding: 20px 12px;
        max-width: 100%;
        width: 100%;
    }
    .signing-header {
        margin-bottom: 24px;
        padding: 20px 16px;
        background: var(--bg-glass);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
    }
    .signing-header > div:first-child {
        width: 56px !important;
        height: 56px !important;
        font-size: 28px !important;
        margin-bottom: 14px !important;
        border-radius: 14px !important;
    }
    .signing-header h1 {
        font-size: 22px;
    }
    .signing-header p {
        font-size: 14px;
    }
    .signing-progress {
        margin-top: 16px;
    }
    .signing-progress-bar {
        width: 180px;
        height: 10px;
    }
    .signer-info-form {
        padding: 18px 16px;
        margin-bottom: 18px;
        border-radius: var(--radius-md);
    }
    .signer-info-form h3 {
        font-size: 16px;
    }

    /* 导航栏紧凑化 */
    .navbar {
        padding: 10px 14px;
    }
    .logo {
        font-size: 18px;
        gap: 8px;
    }
    .logo-icon {
        width: 34px;
        height: 34px;
        font-size: 18px;
        border-radius: 10px;
    }
    .logo-text {
        font-size: 18px;
    }
    .theme-toggle {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    /* PDF页面 — 精确宽度，不用CSS缩放，不限制max-width以允许滚动 */
    .pdf-page-wrapper {
        margin-bottom: 16px;
        box-shadow: var(--shadow-sm);
    }

    /* 签署页PDF：覆盖max-width限制，允许水平滚动查看完整内容 */
    #pdf-area .pdf-page-wrapper {
        max-width: none !important;
        margin: 0 auto 16px;
    }
    .pdf-page-canvas {
        display: block;
    }
    .sign-field-input {
        /* font-size由JS根据字段高度动态计算，不固定 */
    }

    /* 签名弹窗全屏 */
    .sig-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        padding: 16px 14px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .modal-overlay {
        align-items: stretch;
        padding: 0;
    }
    .modal-title {
        font-size: 18px;
        margin-bottom: 12px;
        flex-shrink: 0;
    }
    .signature-pad-wrapper {
        flex: 1 1 auto;
        min-height: 50dvh !important;
        height: 50dvh !important;
        flex-shrink: 0;
        margin-bottom: 12px;
    }
    #sig-canvas {
        touch-action: none;
    }
    .modal-actions {
        margin-top: auto;
        padding-top: 12px;
        flex-shrink: 0;
    }

    /* 签名弹窗内按钮行不收缩 */
    .sig-modal-content > div:not(.signature-pad-wrapper):not(.modal-title) {
        flex-shrink: 0;
    }

    /* 提交按钮全宽 */
    #submit-btn {
        width: 100%;
        min-width: 100% !important;
    }

    /* 防止页面级水平滚动，但PDF区域允许滚动查看 */
    html {
        overflow-x: hidden;
    }
    body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    #pdf-area {
        width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
    }
}

/* === 骨架屏动效降级（ui/skeleton.js） === */
@media (prefers-reduced-motion: reduce) {
    .sf-skeleton::after {
        animation: none;
    }
}

/* === T11 窄屏适配：≤768 / ≤400 / ≤375（375px 优先） ===
   原则：不隐藏主信息与操作按钮；列表转卡片流后操作按钮组整行换行到下方；
   底部操作条用 sticky（保留在文档流内，不遮挡内容） */
@media (max-width: 768px) {
    /* 触控目标 ≥44px、输入框 ≥16px（iOS 聚焦不放大）、按钮组换行 */
    .nav-actions, .modal-actions, .doc-card-footer, .doc-card-stats, .user-filter-bar { flex-wrap: wrap; gap: 8px; }
    .navbar-content { flex-wrap: wrap; row-gap: 8px; }
    .page-header .btn, .modal-actions .btn, .recipient-item .btn-sm, .submission-item .btn-sm { min-height: var(--btn-h-lg); }
    .form-input, .form-label { font-size: 16px; }
    /* 统计卡：窄屏两列 */
    .progress-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .stat-card { padding: 12px 8px; border-radius: var(--radius-md); }
    .stat-value { font-size: 24px; }
    .stat-label { font-size: 11px; letter-spacing: 0; }
    /* 列表行 → 卡片流：主信息占一行，操作组换行到下方且保持可见 */
    .recipient-item, .submission-item { flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding: 12px; }
    .recipient-info, .submission-item > div:first-child { flex: 1 1 60%; min-width: 0; }
    .recipient-item > div:last-child, .submission-item > div:last-child { width: 100%; justify-content: flex-end; gap: 8px; }
    .recipient-email { word-break: break-all; }
    /* 弹窗全屏：stretch 由本文件上面的 ≤768 块提供，此处只补 modal-content 形态
       （ID 级规则优先，批量任务弹窗 / 签名弹窗既有形态不受影响） */
    .modal-content { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; }
    .modal-title { flex-shrink: 0; }
    .modal-actions { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
    /* 底部操作条（含 iPhone 安全区） */
    .login-btn, #submit-btn, .sf-bottom-bar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky); box-shadow: var(--shadow-md); }
    /* dashboard：文档卡片页脚竖排、上传区收缩、用户筛选栏可横向滚动 */
    .doc-card-footer { flex-direction: column; align-items: stretch; }
    .upload-zone { padding: 24px 12px; }
    .user-filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* login / signing / signer_hub（login 页自带内联 <style>，故加 .login-page 提升优先级） */
    .login-page { padding: 16px 12px; }
    .login-page .login-card { width: 100%; max-width: 100%; padding: 20px 16px; }
    .login-page .login-title, .success-title { font-size: 22px; }
    .signer-info-form { padding: 16px 12px; }
    .success-card { padding: 16px 0; }
}

@media (max-width: 400px) {
    .container { padding: 12px 10px; }
    .page-title { font-size: 20px; }
    .progress-stats { gap: 6px; }
    .stat-card { padding: 10px 6px; }
    .stat-value { font-size: 20px; }
    .recipient-avatar { width: 36px; height: 36px; font-size: 14px; }
    .nav-actions .btn-sm { padding: 6px 10px; }
    .btn { font-size: 14px; }
}

@media (max-width: 375px) {
    .container { padding: 12px 8px; }
    .progress-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-value { font-size: 18px; }
    .stat-label { font-size: 10px; }
    .page-title { font-size: 18px; }
    .recipient-item, .submission-item { padding: 10px; }
    .recipient-item > div:last-child > .btn, .submission-item > div:last-child > .btn { flex: 1 1 auto; justify-content: center; }
    .modal-content { padding: 16px 12px; }
    .login-page .login-card { padding: 16px 12px; }
}

/* === dashboard 列表视图窄屏（原 dashboard.html 内联 @media） === */
@media (max-width: 768px) {
    .doc-grid.list-view .doc-card { flex-direction: column; align-items: stretch; }
    .doc-grid.list-view .doc-card-header,
    .doc-grid.list-view .doc-card-body { flex: 1; }
}