/* Users and access: aligned with CRM's neutral green visual language. */
#usersPage { --users-ink:#21352e; --users-muted:#6f7d74; --users-line:#dfe6df; color:var(--users-ink); max-width:1440px; margin:auto; padding:32px 36px 64px; }
#usersPage .users-heading { margin-bottom:28px; align-items:center; gap:20px; }
#usersPage .users-heading h1 { font-size:32px; margin:8px 0 10px; letter-spacing:-.7px; }
#usersPage p { line-height:1.55; }
#usersPage .users-heading p,#usersPage .profile-heading p { color:var(--users-muted); margin:0; font-size:13px; }
#usersPage .page-primary-button,#newRole { min-height:44px; padding:0 20px; background:#254c3b; color:white; border:1px solid #254c3b; border-radius:6px; font-weight:600; cursor:pointer; }
#usersPage .rbac-tabs { display:flex; gap:28px; border-bottom:1px solid var(--users-line); margin:0 0 24px; }
#usersPage .rbac-tabs button { padding:15px 2px; background:transparent; color:var(--users-muted); border:0; border-bottom:3px solid transparent; border-radius:0; font-size:13px; cursor:pointer; }
#usersPage .rbac-tabs button[aria-selected=true] { border-bottom-color:#254c3b; color:#254c3b; font-weight:700; }
#usersPage .users-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
#usersPage .users-stats>div { padding:20px 22px; background:#fff; border:1px solid var(--users-line); border-radius:8px; }
#usersPage .users-stats span { color:var(--users-muted); font-size:12px; }
#usersPage .users-stats strong { display:block; margin-top:10px; font-size:30px; font-weight:600; }
#usersPage .users-panel { border:1px solid var(--users-line); background:#fff; border-radius:8px; padding:0; max-width:none; }
#usersPage .users-directory-heading { display:flex; justify-content:space-between; align-items:center; padding:24px; gap:20px; }
#usersPage h2 { font-size:20px; margin:0 0 6px; }
#usersPage .users-directory-heading p { font-size:12px; color:var(--users-muted); margin:0; }
.users-search { display:grid; gap:6px; font-size:12px; color:#6f7d74; min-width:260px; }
#usersPage input:not([type=checkbox]),#usersPage select,.access-dialog input:not([type=checkbox]),.access-dialog select,.access-dialog textarea,.access-confirm input { box-sizing:border-box; min-height:40px; padding:10px 12px; border:1px solid #cdd8cf; border-radius:5px; background:#fff; color:#21352e; font:inherit; width:100%; }
#usersPage input:focus,#usersPage select:focus,.access-dialog input:focus,.access-dialog textarea:focus,.access-confirm input:focus { outline:2px solid #d5e6da; border-color:#507c5c; }
#usersPage .users-filters { display:flex; align-items:end; gap:12px; padding:0 24px 22px; }
#usersPage .users-filters label { display:grid; gap:6px; min-width:0; flex:1; font-size:11px; color:var(--users-muted); }
#usersPage .users-filters label:nth-child(2) { flex:1.3; }
#usersPage .user-row { display:grid; grid-template-columns:minmax(190px,1.4fr) minmax(180px,1.4fr) minmax(130px,1fr) 100px 125px; gap:18px; align-items:center; padding:20px 24px; border-top:1px solid #edf0ec; min-height:78px; box-sizing:border-box; font-size:12px; }
#usersPage .user-row-head { min-height:44px; background:#f6f8f4; color:#748077; padding-top:12px; padding-bottom:12px; font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
#usersPage .user-row[data-user-id]:hover { background:#fafcf9; }
#usersPage .user-identity { display:flex; align-items:center; gap:12px; min-width:0; }
#usersPage .user-avatar { display:grid; place-items:center; flex:0 0 38px; height:38px; border-radius:50%; background:#eef3eb; color:#426447; font-size:16px; }
#usersPage .user-name { display:grid; gap:5px; min-width:0; }
#usersPage .user-name small { color:#7b887e; font-size:11px; }
#usersPage .user-open-button { border:0; padding:0; width:fit-content; background:none; color:#21352e; font:inherit; font-size:13px; font-weight:600; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
#usersPage .user-open-button:hover { text-decoration:underline; }
#usersPage .user-role { display:flex; flex-wrap:wrap; gap:5px; }
.access-role-tag,.access-admin-badge { padding:5px 8px; background:#f1f4ef; border-radius:4px; font-size:10px; line-height:1.4; }
.access-admin-badge { color:#846b27; background:#f6f0df; }
#usersPage .user-scopes { display:grid; gap:4px; color:#65796a; font-size:11px; }
#usersPage .user-status { width:fit-content; padding:5px 8px; border-radius:4px; font-size:10px; white-space:nowrap; }
#usersPage .user-status::before { content:'●'; padding-right:5px; font-size:8px; }
#usersPage .is-active { background:#edf5ee; color:#4d7850; }
#usersPage .is-disabled { background:#f2f2ef; color:#858779; }
#usersPage .user-last-login { color:#78857b; font-size:11px; line-height:1.6; }
.access-footnote,.access-muted { color:#7a877d; font-size:12px; }
#usersPage .access-footnote { margin:14px 0; }
#usersPage .users-empty { padding:32px 24px; color:#748077; font-size:13px; }
#usersPage .profile-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
#usersPage .rbac-role-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
#usersPage .rbac-role-card { display:flex; flex-direction:column; gap:14px; text-align:left; padding:22px; min-height:210px; background:#fff; border:1px solid var(--users-line); border-radius:8px; color:#21352e; font:inherit; cursor:pointer; }
#usersPage .rbac-role-card:hover { border-color:#8aa98e; box-shadow:0 4px 16px #203f2b09; }
#usersPage .role-card-top { display:flex; justify-content:space-between; gap:14px; width:100%; }
#usersPage .role-card-top strong { font-size:15px; }
#usersPage .rbac-role-card>span:not(.role-card-top) { color:#7b887e; font-size:12px; line-height:1.5; }
#usersPage .rbac-role-card>small { margin-top:auto; color:#6a7e6c; font-size:11px; }
.role-card-modules,.role-members-tags { display:flex; flex-wrap:wrap; gap:6px; }
.role-card-modules>span,.role-members-tags>span { background:#f3f6f0; padding:5px 8px; border-radius:4px; font-size:10px; }
.role-card-modules small { color:#788578; padding:5px; font-size:10px; }
.access-dialog { color:#21352e; width:min(1080px,calc(100vw - 48px)); max-width:none; height:min(900px,calc(100dvh - 48px)); max-height:none; margin:auto; padding:0; border:0; border-radius:12px; box-shadow:0 24px 90px #14241c44; font:13px/1.5 Arial,sans-serif; }
.access-dialog::backdrop,.access-confirm::backdrop { background:#1c302650; backdrop-filter:blur(2px); }
.access-dialog>form { height:100%; display:flex; flex-direction:column; }
.access-dialog header { display:flex; align-items:center; justify-content:space-between; padding:24px 30px; border-bottom:1px solid #e4eae2; gap:20px; }
.access-dialog h2 { margin:5px 0 0; font-size:23px; }
.access-dialog h3 { font-size:15px; margin:0 0 14px; }
.access-dialog-body { flex:1; min-height:0; overflow:auto; padding:26px 30px; }
.access-close { flex:0 0 34px; width:34px; height:34px; background:transparent; border:1px solid #dbe3d8; border-radius:5px; font-size:24px; color:#657361; cursor:pointer; }
.access-dialog footer { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; padding:18px 30px; border-top:1px solid #e4eae2; background:#fbfcfa; }
.access-dialog footer .form-error { width:100%; margin:0; }
.access-dialog footer>span { flex:1; color:#7b887d; font-size:11px; }
.access-dialog button,.access-confirm button { font:inherit; cursor:pointer; }
.access-dialog button:not(.access-close),.access-confirm button:not(.access-close) { min-height:40px; border:1px solid #254c3b; border-radius:5px; padding:10px 16px; background:#254c3b; color:white; }
.access-dialog .secondary-button,.access-confirm .secondary-button,#usersPage .secondary-button { min-height:40px; padding:10px 16px; border:1px solid #d4ded0; border-radius:5px; background:#fff; color:#52684f; font-size:12px; }
.access-dialog .access-danger { color:#9a5347!important; background:#fff!important; border-color:#e4cfc7!important; }
.access-dialog button:disabled,.access-dialog input:disabled { opacity:.55; cursor:default; }
.employee-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:32px; }
.access-form-section { border-bottom:1px solid #e4eae2; padding-bottom:22px; margin-bottom:24px; }
.access-form-section>label:not(.access-check),.role-basics label,.permissions-heading label,#roleTemplateRow>label { display:grid; gap:7px; margin-bottom:16px; color:#667962; font-size:12px; }
.access-form-section p,#roleTemplateRow p,.role-impact p,.permissions-heading p,.access-security p { color:#7b8877; font-size:12px; }
.access-check { display:flex; align-items:flex-start; gap:10px; margin:12px 0; line-height:1.5; color:#2f4931; font-size:12px; }
.access-check input[type=checkbox] { appearance:auto; accent-color:#3b674a; width:17px; height:17px; flex:0 0 17px; margin:1px 0 0; }
.access-check span { min-width:0; }
.access-check small { display:block; color:#7a8777; margin-top:3px; font-size:11px; line-height:1.5; }
.access-role-options .access-check { padding:12px; border:1px solid #e1e8dc; border-radius:5px; margin:8px 0; }
.access-role-options .access-check:has(input:checked) { background:#f4f8f0; border-color:#b0c7aa; }
.access-preview { background:#f6f8f2; border:1px solid #e3e9dc; border-radius:8px; padding:20px; align-self:start; }
.access-preview h3 { margin-top:8px; }
.access-module-summary { padding:12px 0; border-bottom:1px solid #dde5d6; font-size:12px; }
.access-module-summary summary { cursor:pointer; font-weight:600; }
.access-module-summary summary span { float:right; padding-right:10px; color:#7f9377; font-size:11px; }
.access-module-summary>div { padding:6px 0; color:#62745a; }
.access-module-summary small { display:block; color:#8b9785; font-size:10px; padding-top:4px; }
.access-warning,.access-dependency { background:#faf4e5; border:1px solid #e9dfbd; border-radius:6px; color:#856e34; padding:14px; font-size:12px; line-height:1.5; }
.access-dependency { margin:16px 0; }
.access-dependency small { display:block; margin-top:10px; }
.access-diff { font-size:11px; padding:10px 0; }
.access-diff summary { cursor:pointer; font-weight:600; }
.access-diff ul { padding-left:18px; margin:8px 0; max-height:220px; overflow:auto; }
.access-diff li { margin:5px 0; }
.access-diff.is-added { color:#4a7c4c; }
.access-diff.is-removed { color:#a3694a; }
.access-security { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding-top:20px; border-top:1px solid #e1e7dc; margin-top:15px; }
.access-security>div { flex:1; min-width:220px; }
.access-security h3,.access-security p { margin:0 0 6px; }
.role-basics { display:grid; grid-template-columns:1fr 1.3fr; gap:20px; }
#roleTemplateRow { display:flex; align-items:center; gap:20px; background:#f6f8f2; padding:16px; border-radius:6px; margin-bottom:24px; }
#roleTemplateRow>label { min-width:240px; margin:0; }
.permissions-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.permissions-heading h3 { margin-bottom:6px; }
.permissions-heading label { min-width:240px; }
.permission-scope { margin:18px 0 24px; }
.permission-scope>h4 { color:#85927c; font-size:10px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid #e2e8dc; padding-bottom:10px; }
.permission-scope fieldset { border:1px solid #e0e7dc; border-radius:6px; padding:12px 18px; margin:12px 0; min-width:0; }
.permission-scope legend { padding:0 6px; font-size:13px; font-weight:600; }
.permission-actions { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.permission-sensitive { color:#9a8050!important; }
.role-impact { border-top:1px solid #dde6d6; padding-top:22px; margin-top:28px; }
.access-confirm { width:min(600px,calc(100vw - 40px)); box-sizing:border-box; border:0; border-radius:10px; padding:28px; color:#21352e; max-height:85dvh; overflow:auto; font:13px/1.6 Arial,sans-serif; }
.access-confirm h2 { margin:0 0 16px; font-size:22px; }
.access-confirm footer { display:flex; justify-content:flex-end; gap:10px; border-top:1px solid #e2e8dc; margin-top:20px; padding-top:20px; }
#profileDialog>.access-close { float:right; }
#profileDialog label { display:grid; gap:7px; }
.access-history-row { display:grid; grid-template-columns:140px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid #dfe6d8; font-size:12px; }
.access-history-date { color:#85907d; font-size:11px; }
.access-history-row p { margin:6px 0; color:#7c8a71; }
.access-history-row summary { cursor:pointer; font-size:11px; color:#58734a; }
.access-history-values { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.access-history-values pre { max-width:100%; overflow:auto; background:#f5f8f1; padding:12px; font-size:10px; }
#usersPage [hidden],.access-dialog [hidden] { display:none!important; }
@media (max-width:1000px) { #usersPage { padding:24px; } #usersPage .user-row { grid-template-columns:1.2fr 1.1fr 100px 90px; gap:12px; } #usersPage .user-last-login,.user-row-head>span:last-child { display:none; } #usersPage .rbac-role-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:800px) { #usersPage .users-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } #usersPage .user-row { grid-template-columns:1fr 1fr; } #usersPage .user-row-head { display:none; } .employee-layout { grid-template-columns:1fr; } .access-dialog { width:calc(100vw - 24px); height:calc(100dvh - 24px); } }
@media (max-width:620px) { #usersPage { padding:20px 14px; } #usersPage .users-heading,#usersPage .users-directory-heading,#usersPage .profile-heading { align-items:stretch; flex-direction:column; } #usersPage .users-heading h1 { font-size:27px; } #usersPage .rbac-tabs { gap:14px; } #usersPage .rbac-tabs button { font-size:11px; } #usersPage .users-filters { flex-wrap:wrap; padding:0 16px 16px; } #usersPage .users-filters label { flex-basis:40%; } #usersPage .users-filters label:nth-child(2) { flex:1 1 40%; } #usersPage .users-directory-heading,#usersPage .user-row { padding:16px; } #usersPage .rbac-role-list,.role-basics,.permission-actions { grid-template-columns:1fr; } .access-dialog header,.access-dialog-body,.access-dialog footer { padding:18px; } .access-dialog footer>span { display:none; } #roleTemplateRow,.permissions-heading { flex-direction:column; align-items:stretch; gap:4px; } .access-history-row { grid-template-columns:1fr; gap:6px; } .access-history-values { grid-template-columns:1fr; } }

#usersPage .form-error:empty,.access-dialog .form-error:empty { display:none; }

#usersPage .access-unavailable { padding:28px; }
#usersPage .access-unavailable p { color:#71816c; font-size:13px; }