.page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.rw-mode-toggle{

    display:inline-flex;

    border:1px solid #ddd;

    border-radius:8px;

    overflow:hidden;

    margin-bottom:8px;

}

.rw-mode-btn{

    padding:8px 20px;

    border:none;

    background:white;

    color:#374151;

    cursor:pointer;

    font-size:14px;

}

.rw-mode-btn.active{

    background:var(--primary-color, #2563eb);

    color:white;

}

.role-add-panel{

    border:1px solid #e5e7eb;

    border-radius:10px;

    padding:16px;

    margin-top:16px;

    background:#fafafa;

}

.role-add-panel .lead-field-form{

    margin-top:0;

}

.crm-table{

    width:100%;

    border-collapse:collapse;

    background:white;

}

.crm-table th{

    background:#f5f5f5;

    text-align:left;

    padding:14px;

}

.crm-table td{

    padding:14px;

    border-top:1px solid #eee;

}

/* Breaks out of .lead-fields-config's shared max-width (leadModal.css) —
   unlike the rest of that class's users (settings forms/lists), this page
   holds a real data table, so it should use the whole window instead of
   being squeezed down to a form-width column before the table's own
   horizontal scroll (below) even gets a chance to help. The compound
   selector (both classes, matching the element's actual class="lead-fields-
   config role-permissions-config") wins on specificity over the single-
   class rule regardless of which stylesheet happens to load second. */
.lead-fields-config.role-permissions-config{

    max-width:100%;

}

/* Wider than the viewport on purpose once there are more than a couple of
   departments — this scrolls horizontally instead of squeezing every role
   column down to unreadable widths. */
.role-permissions-table-wrap{

    overflow-x:auto;

    max-width:100%;

}

.role-permissions-table{

    min-width:1400px;

}

.role-permissions-table th:not(:first-child),
.role-permissions-table td:not(:first-child){

    min-width:160px;

}

.role-permissions-table th:first-child,
.role-permissions-table td:first-child{

    min-width:180px;

}

/* A permission item is a sub-row nested under its category (e.g. Webhook
   帳號 under 管理) — indented and dimmed so the hierarchy reads at a glance
   without needing its own header column. */
.role-permission-item-row td:first-child{

    padding-left:32px;

    color:#6b7280;

    font-size:13px;

}

/* Toggled purely via JS class swap, not a re-render — see
   rolePermissionsConfig.js's .categoryCollapseBtn click handler. */
.role-permission-item-row-collapsed{

    display:none;

}

/* Label on the left, collapse toggle pinned to the far right of the same
   cell — space-between rather than the button sitting right after the
   label text. */
.role-permissions-category-cell{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

}

.categoryCollapseBtn{

    background:none;

    border:none;

    cursor:pointer;

    padding:2px 6px;

    font-size:18px;

    line-height:1;

    color:#6b7280;

    border-radius:4px;

}

.categoryCollapseBtn:hover{

    background:#e5e7eb;

    color:#374151;

}

.role-permissions-table th.role-group-header{

    text-align:center;

    background:#eef2f7;

    font-weight:700;

}

.role-permissions-table thead th{

    text-align:center;

}

/* Rowspan'd header cells (the blank row-label corner, and any role with no
   department like 管理員) default to vertical-align:middle, which centers
   their text across both header rows — visually sinking it toward the
   second row instead of lining up with the department-group cells' top
   row, making a solo role look like it's bleeding into the row-label
   column instead of being clearly its own column. */
.role-permissions-table th[rowspan]{

    vertical-align:top;

}

/* No column dividers otherwise — every th/td shares the same background,
   so column boundaries (especially the row-label column vs. the first
   role column) aren't visually distinguishable without one. */
.role-permissions-table th:not(:first-child),
.role-permissions-table td:not(:first-child){

    border-left:1px solid #e5e7eb;

}

.role-permissions-table th[draggable="true"]{

    cursor:grab;

}

/* Horizontal equivalent of pipeline.css's .lead-card.drop-before/after —
   these headers are laid out as columns, so the drop indicator is a
   left/right border instead of top/bottom. */
.role-permissions-table th.drag-drop-before{

    box-shadow:inset 3px 0 0 var(--primary-color, #2563eb);

}

.role-permissions-table th.drag-drop-after{

    box-shadow:inset -3px 0 0 var(--primary-color, #2563eb);

}

.role-permissions-table th button.deleteRoleBtn,
.role-permissions-table th button.deleteDepartmentBtn{

    margin-left:8px;

    background:transparent;

    color:#d32f2f;

    border:none;

    font-size:12px;

    cursor:pointer;

    padding:2px 6px;

}

.userCompanySelect{

    padding:6px 8px;

    border:1px solid #ddd;

    border-radius:6px;

}

.role-permissions-table select{

    width:100%;

    padding:6px 8px;

    border:1px solid #ddd;

    border-radius:6px;

}

.company-group{

    background:white;

    border-radius:10px;

    margin-bottom:16px;

    overflow:hidden;

    box-shadow:0 2px 5px rgba(0,0,0,.05);

}

.company-group-toggle{

    width:100%;

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 16px;

    background:#f9fafb;

    color:#1f2937;

    border:none;

    cursor:pointer;

    text-align:left;

}

.company-group-arrow{

    transition:.2s;

}

.company-group.open .company-group-arrow{

    transform:rotate(180deg);

}

.company-group-count{

    color:#6b7280;

    font-size:13px;

    margin-left:auto;

}

.company-group-body{

    display:none;

}

.company-group.open .company-group-body{

    display:block;

}

.user-row{

    cursor:pointer;

}

.user-row:hover{

    background:#f5f7fb;

}

.user-profile-modal label{

    display:block;

    font-size:13px;

    color:#6b7280;

    margin-top:10px;

    margin-bottom:4px;

}

.user-profile-modal input,
.user-profile-modal select{

    width:100%;

    padding:10px 12px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:14px;

    font-family:inherit;

    box-sizing:border-box;

}

.profile-field-value{

    padding:10px 12px;

    background:#f8f9fa;

    border-radius:8px;

    font-size:14px;

}

.store-multiselect-table{

    width:100%;

    max-height:180px;

    display:block;

    overflow-y:auto;

    border:1px solid #ddd;

    border-radius:8px;

    border-collapse:collapse;

    font-size:14px;

}

.store-multiselect-table tbody{

    display:table;

    width:100%;

}

.store-multiselect-table tr{

    border-bottom:1px solid #eee;

}

.store-multiselect-table tr:last-child{

    border-bottom:none;

}

.store-multiselect-table td{

    padding:8px 12px;

    vertical-align:middle;

}

.store-multiselect-checkbox-cell{

    width:32px;

}

.store-multiselect-table label{

    margin:0;

    cursor:pointer;

    color:#1f2937;

    font-size:14px;

}