/**
 * 後台響應式 - 角色管理：表格卡片式佈局
 *
 * 由 admin-responsive.css 依原行序拆出；載入順序見 src/lib/assets.ts 的
 * ADMIN_STYLES，順序即 cascade 順序，不可調換。
 */

/* ==================== 角色管理表格 - 卡片式佈局（簡潔版） ==================== */
@media (max-width: 48rem) {
    /* 角色表格容器 */
    #rolesTableContainer {
        overflow-x: visible;
    }

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

    #rolesTable thead {
        display: none;
    }

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

    #rolesTable tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 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);
        gap: 0.5rem;
    }

    #rolesTable tbody tr:hover {
        border-color: #555;
        background: #252525;
    }

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

    .light-theme #rolesTable tbody tr:hover {
        border-color: #bdbdbd;
        background: #fafafa;
    }

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

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

    /* 角色代碼 - 主標題樣式 */
    #rolesTable tbody tr td:nth-child(2) {
        order: 1;
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--text-primary);
    }

    /* 移除角色代碼的圖標 */
    #rolesTable tbody tr td:nth-child(2)::before {
        display: none;
    }

    /* 顯示名稱 - 灰色次要文字 */
    #rolesTable tbody tr td:nth-child(3) {
        order: 2;
        font-size: 0.75rem;
        color: #9e9e9e;
        background: none;
        padding: 0;
        font-weight: 400;
    }

    #rolesTable tbody tr td:nth-child(3)::before {
        content: '·';
        margin-right: 0.375rem;
        color: #616161;
    }

    .light-theme #rolesTable tbody tr td:nth-child(3) {
        color: #757575;
        background: none;
    }

    /* 操作按鈕 - 右側 */
    #rolesTable tbody tr td:nth-child(5) {
        order: 3;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        margin-left: auto;
        position: relative;
        z-index: 2;
    }

    #rolesTable tbody tr td:nth-child(5) .btn-icon {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        position: relative;
        z-index: 3;
        cursor: pointer;
    }

    /* 權限標籤 - 第二行 */
    #rolesTable tbody tr td:nth-child(4) {
        order: 10;
        flex-basis: 100%;
        padding-top: 0.5rem;
        margin-top: 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .light-theme #rolesTable tbody tr td:nth-child(4) {
        border-top-color: rgba(0, 0, 0, 0.06);
    }

    /* 移除權限標籤的 ::before 圖標 */
    #rolesTable tbody tr td:nth-child(4)::before {
        display: none !important;
    }

    #rolesTable tbody tr td:nth-child(4) .permission-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* 權限標籤 - 統一使用灰色 */
    #rolesTable tbody tr td:nth-child(4) .permission-badge {
        font-size: 0.625rem;
        padding: 0.1875rem 0.375rem;
        background: #333 !important;
        color: #bdbdbd !important;
        border: none !important;
    }

    .light-theme #rolesTable tbody tr td:nth-child(4) .permission-badge {
        background: #e0e0e0 !important;
        color: #616161 !important;
    }

    /* 分組 chip 上的數量徽記要跟著上面的灰色走，
       否則會變成「灰底 ＋ 琥珀色小圓點」，在這一欄裡顯得很突兀 */
    #rolesTable tbody tr td:nth-child(4) .permission-chip-count {
        background: rgba(255, 255, 255, 0.14);
    }

    .light-theme #rolesTable tbody tr td:nth-child(4) .permission-chip-count {
        background: rgba(0, 0, 0, 0.1);
    }

    /* 角色頁面排序按鈕 */
    #page-roles .mobile-sort-btn {
        display: flex;
    }

    /* 角色頁面工具列按鈕 */
    #page-roles .toolbar-right .btn span {
        display: inline;
    }

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

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

/* 角色管理表格 - 小型手機優化 */
@media (max-width: 30rem) {
    #rolesTable tbody tr {
        padding: 0.625rem;
        gap: 0.375rem;
    }

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

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

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

    #rolesTable tbody tr td:nth-child(4) {
        padding-top: 0.375rem;
    }

    #rolesTable tbody tr td:nth-child(4) .permission-badge {
        font-size: 0.5625rem;
        padding: 0.125rem 0.25rem;
    }

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