.personal-only{display:none}
.personal-mode .personal-only{display:block}
.personal-mode .master,.personal-mode #masterBtn,.personal-mode #developerBtn,.personal-mode #settingsBtn,.personal-mode #auditBtn,
.personal-mode [hidden]{display:none!important}
/* Users is a sibling of .main, just like the two existing embedded workspaces.
   Hiding only .main's children leaves an occupied grid cell and pushes Users
   under the sidebar. Replace the whole workspace instead. */
.personal-mode.users-view .app>.main{display:none}
#usersWorkspace{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:18px;min-width:0;min-height:0;height:100vh;padding:22px 24px;overflow:hidden;box-sizing:border-box;color:var(--text,#17324d);background:var(--bg,#f2f6fa)}
#usersWorkspace *{box-sizing:border-box}
.users-header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0;min-width:0}
.users-header h1{margin:0;font-size:25px;letter-spacing:-.4px}
.users-header p{margin:5px 0 0;color:#74889a;font-size:12px;line-height:1.5}
.users-header-actions,.user-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#usersWorkspace .btn{font:inherit;font-size:12px;font-weight:800;min-height:38px;padding:10px 16px;white-space:normal}
.users-columns{display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:18px;flex:1;min-height:0;min-width:0}
.users-list-panel,#userEditor{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #dfe8ef;border-radius:16px;background:#fff;box-shadow:0 4px 14px rgba(16,57,91,.05)}
.users-list-head{padding:18px 16px 12px;border-bottom:1px solid #edf2f6}
.users-list-head h2{margin:0 0 12px;font-size:15px;display:flex;align-items:center;gap:8px}
#userCount{font-size:11px;background:#e9f3fc;color:#2674af;border-radius:20px;padding:3px 8px}
.user-search{display:block}
#userSearch{width:100%;min-width:0;border:1px solid #cbd9e4;border-radius:9px;padding:10px 12px;background:#f9fcff;color:#214762;font:inherit;font-size:12px;outline:none}
#userSearch:focus,#userForm input:focus,#userForm select:focus{border-color:#6db2ed;box-shadow:0 0 0 3px #e5f2ff;outline:none}
#userList{display:flex;flex-direction:column;gap:5px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px}
.user-list-item{display:flex;align-items:flex-start;gap:10px;width:100%;flex-shrink:0;padding:12px 10px;border:1px solid transparent;border-radius:11px;background:transparent;text-align:left;color:#214762;font:inherit;cursor:pointer}
.user-list-item:hover:not(:disabled){background:#f4f9fe;border-color:#dcebf7}
.user-list-item.selected{background:#edf6ff;border-color:#99c9ef;box-shadow:inset 3px 0 #1682de}
.user-list-item:focus-visible{outline:2px solid #1682de;outline-offset:-2px}
.user-list-item:disabled{cursor:default;color:#708394;background:#f7f9fb}
.user-avatar{display:flex;align-items:center;justify-content:center;flex:0 0 32px;height:32px;border-radius:10px;background:#e8f0f7;color:#426d8d;font-size:13px;font-weight:800}
.selected .user-avatar{background:#d8eafd;color:#176eae}
.user-list-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;overflow-wrap:anywhere}
.user-list-info strong{font-size:12px;line-height:1.4}.user-list-info>span{font-size:11px;color:#627f96;line-height:1.4}.user-list-info small{font-size:10px;color:#8094a4;line-height:1.4}
.users-list-note{margin:0;padding:12px 16px;border-top:1px solid #edf2f6;color:#7a8e9f;font-size:10px;line-height:1.5}
#userListEmpty{padding:0 16px}
.user-profile-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.user-profile-heading h2{margin:0;font-size:14px;line-height:1.4}
.user-category{margin-left:auto;font-size:12px;color:#74889a}
.user-status{display:inline-flex;align-items:center;flex:0 0 auto;border-radius:20px;padding:5px 9px;background:#e8f7ef;color:#2d8155;font-size:10px;font-weight:800;white-space:nowrap}
.user-status.blocked{background:#fff0f0;color:#b23d48}
#userForm{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;margin:0}
.user-form-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 16px;scrollbar-gutter:stable}
#usersWorkspace .setting-card{margin:0 0 12px;padding:12px;min-width:0;min-inline-size:0;border:1px solid #dfe8ef;border-radius:13px;background:linear-gradient(180deg,#fbfdff,#f6faff)}
#usersWorkspace .setting-card:last-child{margin-bottom:0}
#usersWorkspace .setting-card h3,#usersWorkspace .setting-card legend{margin:0 0 10px;font-size:13px;line-height:1.4;font-weight:800;color:#214762}
#usersWorkspace .setting-card legend{padding:0 6px;margin-left:-6px}
.user-profile-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px 14px;align-items:start}
.user-profile-fields>label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:11px;font-weight:700;color:#526f85}
#userForm .user-profile-fields input,#userForm .user-profile-fields select{width:100%;min-width:0;min-height:38px;margin:0;border:1px solid #cbd9e4;border-radius:9px;padding:9px 10px;background:#fff;color:#214762;font:inherit;font-size:13px;outline:none}
#userForm .user-profile-fields input[readonly]{background:#eef3f7;color:#6f8495}
#userForm small{font-weight:400;font-size:10px;color:#74889a;line-height:1.5}
#usersWorkspace input[type=checkbox]{width:17px;height:17px;min-height:0;flex:0 0 17px;padding:0;margin:0;accent-color:#137dd4;box-shadow:none;cursor:pointer}
#usersWorkspace input[type=checkbox]:disabled{cursor:not-allowed}
.user-block{min-width:0;align-self:center;font-size:12px;color:#526f85}
.user-block>label{display:flex;align-items:center;gap:8px;cursor:pointer}
.user-block small{display:block;margin-top:4px}
#usersWorkspace .user-help{min-height:0;margin:0 0 10px;font-size:12px;color:#74889a;line-height:1.5}
.user-role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px}
.user-role{display:flex;align-items:flex-start;gap:8px;min-width:0;padding:8px 10px;border:1px solid #dce7ef;border-radius:10px;background:#fff;cursor:pointer}
.user-role:has(input:checked){background:#eef7ff;border-color:#9ac9ed}
.user-role strong{display:block;font-size:13px;line-height:1.4;color:#214762}#userForm .user-role small{display:block;margin-top:3px;font-size:11px}.user-role>span{min-width:0;overflow-wrap:anywhere}
.user-rights-group{min-width:0;border-top:1px solid #dce7ef}
.user-rights-group>summary{padding:10px 4px;color:#23577b;font-size:13px;font-weight:800;line-height:1.4;overflow-wrap:anywhere;cursor:pointer}
.user-rights-group>summary:hover{background:#edf5fc}
.user-rights-group>summary:focus-visible{outline:2px solid #1682de;outline-offset:-2px;border-radius:5px}
.user-rights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;padding-bottom:8px}
.user-right{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;min-height:36px;padding:7px 8px;border-bottom:1px solid #e5edf4;color:#36566f;font-size:13px;line-height:1.4;cursor:pointer}
.user-right>span{min-width:0;overflow-wrap:anywhere}
#userForm .user-right small{display:block;margin-top:3px;font-size:11px}
.user-right:hover{background:#eef6fc}
.user-right:focus-within{background:#e5f2ff;outline:2px solid #6db2ed;outline-offset:-2px;border-radius:5px}
.user-form-footer{flex-shrink:0;border-top:1px solid #e0eaf2;padding:12px 16px;background:#fff}
#userMessage{margin:8px 0 0;font-size:11px;line-height:1.5;color:#657f93;min-height:17px}
.user-empty{padding:36px;color:#74889a;text-align:center}.user-empty h2{font-size:18px;color:#214762}
.user-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1200px){#usersWorkspace{padding:16px;gap:14px}.users-columns{grid-template-columns:280px minmax(0,1fr);gap:14px}}
@media(max-width:1100px){.user-rights-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:800px){#usersWorkspace{height:auto;min-height:100vh;overflow:visible;padding:14px 12px}.users-header{align-items:flex-start;flex-wrap:wrap}.users-header h1{font-size:22px}.users-columns{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}.users-list-panel{max-height:280px}#userEditor{overflow:visible}.user-form-scroll{overflow:visible}.user-rights-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.user-form-footer{position:sticky;bottom:0;z-index:2;border-radius:0 0 16px 16px}}
@media(max-width:700px){#usersWorkspace{padding-bottom:82px}.user-form-footer{bottom:67px}}
@media(max-width:600px){.user-rights-grid{grid-template-columns:minmax(0,1fr)}.user-form-scroll{padding:12px}.user-profile-fields{grid-template-columns:minmax(0,1fr)}}
.personal-mode .stage{pointer-events:none}
.personal-mode .stage.can{pointer-events:auto}
#viewerCredentials label,#passwordRequirements{font-size:13px;line-height:1.4;text-align:left;color:#36546b}
#viewerCredentials label:not([hidden]){margin-top:6px}
#viewerCredentials .pass{margin:4px 0 8px}
#passwordRequirements{margin:2px 0 12px}
#accessModal .modalbox{max-height:calc(100dvh - 40px);overflow:auto}
.personal-mode #personalLogin{letter-spacing:normal;font-size:16px;text-align:left}
.personal-mode #accessPassword,.personal-mode #personalNewPassword{letter-spacing:normal;font-size:16px}
.personal-mode #personalBar{position:fixed;top:12px;right:18px;z-index:11;display:flex;align-items:center;justify-content:flex-end;padding:0;margin:0}
.personal-mode #personalBar[hidden]{display:none}
.personal-mode #personalLogout{font-size:13px;min-height:38px;padding:10px 16px}
.personal-mode #personalNewPassword[hidden]{display:none}
.personal-mode.access-locked #orders,.personal-mode.access-locked #detail{visibility:hidden}
#sessionVerification{display:none}
body.session-unverified>:not(#sessionVerification){display:none!important}
body.session-unverified>#sessionVerification{display:block;margin:12vh auto;text-align:center;color:#36546b}

/* The one session button occupies reserved space in each existing header. */
.personal-mode .top,.personal-mode .users-header{padding-right:100px}
.personal-mode.users-view #personalBar{top:22px;right:24px}
.personal-mode.calculations-view #personalBar{top:18px;right:24px}
@media screen and (min-width:701px){.personal-mode .app{height:100dvh;min-height:0}}
@media(max-width:1200px){.personal-mode.users-view #personalBar{top:16px;right:16px}}
@media(max-width:1100px){.personal-mode #personalBar{top:14px;right:14px}.personal-mode.calculations-view #personalBar{top:18px;right:24px}}
@media(max-width:800px){.personal-mode.users-view #personalBar{top:14px;right:12px}}
@media(max-width:700px){.personal-mode #personalBar{top:12px;right:10px}.personal-mode .top{padding-right:100px}}