/**
 * 後台響應式 - 使用者管理：表格卡片式佈局與 Modal
 *
 * 由 admin-responsive.css 依原行序拆出；載入順序見 src/lib/assets.ts 的
 * ADMIN_STYLES，順序即 cascade 順序，不可調換。
 *
 * ⚠ 這裡的 `td:nth-child(N)` 對應的是 legacy/index.html 裡 #usersTable 的欄位序：
 *   1 勾選　2 ID　3 使用者名稱　4 暱稱　5 角色　6 狀態　7 最後登入　8 操作
 *   在表格中間插入或移除欄位時，這整份的序號都要跟著平移
 *   （pages/users.css 的 `#usersTable td:nth-child(...)` 與 renderUsers 的
 *   空狀態 colspan 同理）。
 */

/* ===== 使用者管理表格 - 卡片式佈局 ===== */
@media (max-width: 48rem) {
    /* 使用者表格容器 */
    #usersTableContainer {
        overflow-x: visible;
    }

    #usersTable {
        min-width: unset;
        display: block;
    }

    #usersTable thead {
        display: none;
    }

    #usersTable tbody {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    #usersTable tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0.625rem 0.75rem;
        background: #1e1e1e;
        border-radius: 0.5rem;
        border: 1px solid #333;
        position: relative;
        transition-property: color, background-color, border-color, box-shadow, transform, opacity, scale, translate, rotate, filter;
        transition-duration: var(--motion-fast);
        transition-timing-function: var(--ease-out-quart);
    }

    /* 行分隔偽元素 - 在按鈕後強制換行 */
    #usersTable tbody tr::before {
        content: '';
        order: 10;
        flex-basis: 100%;
        height: 0;
        margin-top: 0.375rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .light-theme #usersTable tbody tr::before {
        border-top-color: rgba(0, 0, 0, 0.06);
    }

    #usersTable tbody tr:hover {
        border-color: rgba(212, 165, 32, 0.4);
        background: #252525;
    }

    .light-theme #usersTable tbody tr {
        background: #fff;
        border-color: #e0e0e0;
    }

    .light-theme #usersTable tbody tr:hover {
        border-color: rgba(212, 165, 32, 0.5);
        background: #fafafa;
    }

    #usersTable tbody tr td {
        border-bottom: none;
        padding: 0;
    }

    /* 勾選 - 卡片最左側 */
    #usersTable tbody tr td:nth-child(1) {
        order: 0;
        margin-right: 0.25rem;
    }

    /* ID - 隱藏 */
    #usersTable tbody tr td:nth-child(2) {
        display: none;
    }

    /* 暱稱 - 主標題 */
    #usersTable tbody tr td:nth-child(4) {
        order: 1;
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--text-primary);
    }

    #usersTable tbody tr td:nth-child(4):empty::before {
        content: '—';
        color: var(--text-muted);
        font-weight: 400;
    }

    /* 使用者名稱 - 括號 */
    #usersTable tbody tr td:nth-child(3) {
        order: 2;
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-left: 0.375rem;
    }

    #usersTable tbody tr td:nth-child(3)::before {
        content: '(';
    }

    #usersTable tbody tr td:nth-child(3)::after {
        content: ')';
    }

    /* 操作按鈕 - 右側 */
    #usersTable tbody tr td:nth-child(8) {
        order: 3;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        margin-left: auto;
        padding-left: 0.5rem;
    }

    #usersTable tbody tr td:nth-child(8) .btn-icon {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 0.25rem;
        background: transparent;
        border: none;
        font-size: 0.75rem;
        transition-property: color, background-color, border-color, box-shadow, transform, opacity, scale, translate, rotate, filter;
        transition-duration: var(--motion-fast);
        transition-timing-function: var(--ease-out-quart);
        color: var(--text-muted);
    }

    #usersTable tbody tr td:nth-child(8) .btn-icon:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .light-theme #usersTable tbody tr td:nth-child(8) .btn-icon:hover {
        background: rgba(0, 0, 0, 0.06);
    }

    #usersTable tbody tr td:nth-child(8) .btn-icon:first-child:hover {
        color: #d4a520;
    }

    #usersTable tbody tr td:nth-child(8) .btn-icon.btn-danger:hover {
        color: #ef4444;
    }

    /* 第二行 - 角色 */
    #usersTable tbody tr td:nth-child(5) {
        order: 11;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding-top: 0.375rem;
    }

    #usersTable tbody tr td:nth-child(5) .role-badge {
        font-size: 0.625rem;
        padding: 0.1875rem 0.5rem;
        border-radius: 0.25rem;
    }

    /* 第二行 - 狀態 */
    #usersTable tbody tr td:nth-child(6) {
        order: 12;
        padding-top: 0.375rem;
        margin-left: 0.25rem;
    }

    #usersTable tbody tr td:nth-child(6) .status-badge {
        font-size: 0.625rem;
        padding: 0.1875rem 0.5rem;
        border-radius: 0.25rem;
    }

    #usersTable tbody tr td:nth-child(6) .status-badge.status-active {
        padding-left: 0.5rem;
    }

    #usersTable tbody tr td:nth-child(6) .status-badge.status-active::before {
        display: none;
    }

    /* 第二行 - 最後登入 */
    #usersTable tbody tr td:nth-child(7) {
        order: 13;
        display: flex;
        align-items: center;
        font-size: 0.625rem;
        color: var(--text-muted);
        margin-left: auto;
        padding-top: 0.375rem;
    }

    #usersTable tbody tr td:nth-child(7)::before {
        content: '\f017';
        font-family: 'Font Awesome 6 Free';
        font-weight: 400;
        margin-right: 0.25rem;
        font-size: 0.5625rem;
        opacity: 0.7;
    }

    /* 使用者頁面排序按鈕 */
    #page-users .mobile-sort-btn {
        display: flex;
    }

    /* 使用者頁面工具列按鈕 - 顯示文字 */
    #page-users .toolbar-right .btn span {
        display: inline;
    }

    #page-users .toolbar-right .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        gap: 0.375rem;
    }

    #page-users .toolbar-right {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* 使用者管理表格 - 小型手機優化 */
@media (max-width: 30rem) {
    #usersTable tbody {
        gap: 0.375rem;
    }

    #usersTable tbody tr {
        padding: 0.5rem 0.625rem;
    }

    #usersTable tbody tr::before {
        margin-top: 0.25rem;
    }

    #usersTable tbody tr td:nth-child(4) {
        font-size: 0.875rem;
    }

    #usersTable tbody tr td:nth-child(3) {
        font-size: 0.6875rem;
    }

    #usersTable tbody tr td:nth-child(5) {
        padding-top: 0.25rem;
        gap: 0.25rem;
    }

    #usersTable tbody tr td:nth-child(6) {
        padding-top: 0.25rem;
    }

    #usersTable tbody tr td:nth-child(7) {
        padding-top: 0.25rem;
        font-size: 0.5625rem;
    }

    #usersTable tbody tr td:nth-child(5) .role-badge,
    #usersTable tbody tr td:nth-child(6) .status-badge {
        font-size: 0.5625rem;
        padding: 0.125rem 0.375rem;
    }

    #usersTable tbody tr td:nth-child(8) .btn-icon {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.6875rem;
    }

    /* 使用者頁面工具列按鈕 - 小螢幕 */
    #page-users .toolbar-right .btn span {
        display: inline;
    }

    #page-users .toolbar-right .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
    }
}

/* ===== 使用者 Modal 響應式 ===== */
@media (max-width: 48rem) {
    #userModal .modal-content {
        width: 95%;
        max-width: 24rem;
    }

    #userModal .modal-header h3::before {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }

    #userModal .form-group {
        margin-bottom: 1rem;
    }

    #userModal .form-input {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    #userModal select.form-input {
        padding-right: 2.5rem;
    }
}

@media (max-width: 30rem) {
    #userModal .modal-content {
        width: 95%;
        max-width: none;
        margin: 0.5rem;
    }

    #userModal .modal-header {
        padding: 1rem;
    }

    #userModal .modal-header h3 {
        font-size: 1rem;
    }

    #userModal .modal-body {
        padding: 1rem;
    }

    #userModal .modal-footer {
        padding: 1rem;
        flex-direction: column-reverse;
    }

    #userModal .modal-footer .btn {
        width: 100%;
    }
}