/* assets/responsive.css —— 全站移动端适配规则（仅在窄屏生效） */

/* ============================================================
 * 平板 & 手机（<= 768px）
 * ============================================================ */
@media (max-width: 768px) {

    /* ---------- 通用 ---------- */
    body { padding: 12px !important; }

    /* ---------- login.php ---------- */
    .box {
        width: calc(100vw - 24px) !important;
        max-width: 420px;
        padding: 28px 22px !important;
        margin: 0 auto;
    }
    .header-title h2 { font-size: 20px !important; }

    /* ---------- setup.php ---------- */
    .setup-card {
        width: calc(100vw - 24px) !important;
        max-width: 580px;
        padding: 26px 20px !important;
    }
    .input-with-btn {
        flex-direction: column;
        align-items: stretch;
    }
    .input-with-btn .btn-gen {
        padding: 10px 14px;
        width: 100%;
    }

    /* ---------- index.php 顶部容器 ---------- */
    .container {
        padding: 15px !important;
        border-radius: 12px !important;
    }

    /* 头部：改成两行 */
    .header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
        padding-bottom: 12px !important;
    }
    .header h2 { font-size: 18px !important; }
    .user-info {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        width: 100%;
    }
    .user-info a { margin-left: 0 !important; }

    /* 概览卡片：垂直堆叠 */
    .overview-panel {
        flex-direction: column;
        gap: 10px !important;
    }
    .stat-card {
        min-width: 0 !important;
        width: 100%;
        padding: 14px 16px !important;
    }
    .stat-card .value { font-size: 18px !important; }

    /* 上传监控：任务项改垂直 */
    .task-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 10px 12px 14px 12px !important;
    }
    .task-item .task-info {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 3px 0 !important;
        width: 100%;
    }
    .task-item .task-info span {
        white-space: normal !important;
        word-break: break-all;
    }
    .task-elapsed {
        align-self: flex-start;
        margin-top: 4px;
    }
    .task-delete-btn {
        align-self: flex-end;
        margin-top: 4px;
    }

    /* ---------- 主表格：横向滚动 ---------- */
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px;
        padding: 0 15px 4px 15px;
    }
    .table-scroll table {
        min-width: 960px;
    }
    .table-scroll::-webkit-scrollbar { height: 6px; }
    .table-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }
    html.dark-mode .table-scroll::-webkit-scrollbar-thumb {
        background: #4b5563;
    }

    /* ---------- 分页（移动端） ---------- */
    .pagination {
        gap: 4px !important;
        margin-top: 16px !important;
    }
    .pagination a, .pagination span {
        padding: 5px 9px !important;
        font-size: 12px !important;
    }
    .pagination .info {
        width: 100% !important;
        text-align: center !important;
        margin: 8px 0 0 0 !important;
        background: transparent !important;
        border: none !important;
    }

    /* 底部操作栏也换行 */
    .actions-bar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }
    .actions-bar > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 8px !important;
        width: 100%;
    }
    .actions-bar > div:first-child button,
    .actions-bar > div:first-child form {
        width: 100%;
    }
    .actions-bar > div:first-child button {
        padding: 12px 16px !important;
    }

    /* ---------- 所有弹窗 ---------- */
    .modal-box {
        width: calc(100vw - 20px) !important;
        max-width: 100% !important;
        padding: 22px 18px !important;
        max-height: 92vh !important;
        overflow-y: auto;
    }
    .modal-title { font-size: 18px !important; }

    /* 弹窗内的用户管理表格也横向滚动 */
    .modal-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .modal-table thead,
    .modal-table tbody {
        display: table;
        width: 100%;
    }

    /* 用户添加表单：三列改一列 */
    .modal-card-gray > div[style*="display:flex"][style*="gap:14px"] {
        flex-direction: column !important;
    }

    /* 授权弹窗里的 API Token 输入行 */
    #apiTokenForm {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #apiTokenForm .modal-input { width: 100%; }
    #apiTokenForm button { width: 100%; }

    /* 强制内联 width 的 modal 自适应 */
    .modal-box[style*="width:580px"],
    .modal-box[style*="width:720px"],
    .modal-box[style*="width:440px"],
    .modal-box[style*="width:420px"],
    .modal-box[style*="width:400px"] {
        width: calc(100vw - 20px) !important;
    }
}

/* ============================================================
 * 小屏手机（<= 480px）
 * ============================================================ */
@media (max-width: 480px) {

    body { padding: 8px !important; }
    .container { padding: 12px !important; }
    .box, .setup-card { padding: 22px 16px !important; }

    .header h2 { font-size: 16px !important; }
    .user-info { font-size: 13px; }

    .stat-card .value { font-size: 16px !important; }
    .stat-card .title { font-size: 11px !important; }

    .captcha-code { font-size: 16px !important; letter-spacing: 2px; }

    .btn, .action-btn {
        font-size: 11px !important;
        padding: 5px 10px !important;
        min-width: 70px !important;
    }
    .badge-app, .badge-size {
        font-size: 11px !important;
        min-width: 34px !important;
    }

    .modal-box { padding: 18px 14px !important; }
    .modal-title { font-size: 16px !important; }

    .task-item .task-info span { font-size: 12px !important; }
    .task-elapsed { font-size: 12px !important; }

    /* 极窄屏下分页按钮进一步压缩 */
    .pagination a, .pagination span {
        padding: 4px 7px !important;
        font-size: 11px !important;
        border-radius: 5px !important;
    }
}