/* ==================== SETTINGS & PERMISSIONS ==================== */

/* User Cards Grid */
.perm-user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.perm-user-card { background: var(--dark-600); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.15s; }
.perm-user-card:hover { border-color: rgba(129,140,248,0.3); }

.perm-user-card-head { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); }
.perm-user-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, rgba(129,140,248,0.2), rgba(129,140,248,0.05)); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #818cf8; flex-shrink: 0; }
.perm-user-info { flex: 1; min-width: 0; }
.perm-user-name { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perm-user-email { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perm-level-badge { font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 6px; background: color-mix(in srgb, var(--lvl-color) 12%, transparent); color: var(--lvl-color); white-space: nowrap; flex-shrink: 0; }

.perm-user-card-body { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 16px; gap: 8px; }
.perm-stat { text-align: center; }
.perm-stat-label { display: block; font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.perm-stat-value { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); margin-top: 2px; }

.perm-user-card-foot { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

/* Modal Sections */
.perm-section { background: var(--dark-600); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.perm-section-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; }
.perm-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }

/* Level Selector */
.perm-level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.perm-level-option { padding: 12px; border: 2px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.15s; text-align: center; }
.perm-level-option:hover { border-color: rgba(129,140,248,0.3); background: rgba(129,140,248,0.03); }
.perm-level-option.active { border-color: #818cf8; background: rgba(129,140,248,0.06); }
.perm-level-icon { font-size: 22px; margin-bottom: 6px; }
.perm-level-name { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.perm-level-desc { font-size: 9px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; }

/* Capabilities */
.perm-cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.perm-cap-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); padding: 6px 10px; border-radius: 6px; cursor: pointer; transition: background 0.1s; }
.perm-cap-item:hover { background: rgba(255,255,255,0.03); }
.perm-cap-item input:disabled + span { opacity: 0.4; }

/* Pages Grid */
.perm-pages-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.perm-page-group { }
.perm-page-group-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.perm-page-item { margin-bottom: 4px; }
.perm-page-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); padding: 3px 0; cursor: pointer; }
.perm-page-check:hover { color: var(--text-primary); }

/* Tab sub-permissions — redesigned */
.perm-tab-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 6px 20px; padding-left: 12px; border-left: 2px solid rgba(129,140,248,0.2); }
.perm-tab-wrapper { background: var(--dark-700); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; padding: 10px 12px; transition: border-color 0.15s; }
.perm-tab-wrapper:hover { border-color: rgba(129,140,248,0.15); }
.perm-tab-item { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-primary); cursor: pointer; padding: 0; background: none; }
.perm-tab-item input[type="checkbox"] { width: 14px; height: 14px; accent-color: #818cf8; cursor: pointer; }
.perm-tab-item span { letter-spacing: 0.2px; }

/* Action pills inside each tab */
.perm-action-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.04); }
.perm-action-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); padding: 4px 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; cursor: pointer; transition: all 0.15s; white-space: nowrap; user-select: none; }
.perm-action-item:hover { background: rgba(129,140,248,0.08); border-color: rgba(129,140,248,0.2); color: var(--text-primary); }
.perm-action-item input[type="checkbox"] { width: 12px; height: 12px; accent-color: #818cf8; cursor: pointer; margin: 0; }
.perm-action-item input[type="checkbox"]:checked + span { color: #c4b5fd; font-weight: 500; }

/* Team & Project Access */
.perm-access-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 200px; overflow-y: auto; }
.perm-access-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); padding: 6px 10px; background: var(--dark-700); border-radius: 6px; cursor: pointer; transition: background 0.1s; }
.perm-access-item:hover { background: rgba(129,140,248,0.06); }
.perm-access-count { margin-left: auto; font-size: 10px; color: var(--text-muted); }

/* Responsive */
@media (max-width: 900px) {
    .perm-user-grid { grid-template-columns: 1fr; }
    .perm-level-grid { grid-template-columns: repeat(2, 1fr); }
    .perm-pages-grid { grid-template-columns: 1fr; }
    .perm-cap-grid { grid-template-columns: 1fr; }
    .perm-access-grid { grid-template-columns: repeat(2, 1fr); }
}