.um-root{display:flex;flex-direction:column;min-height:0;flex:1;color:#405468;background:#f4f7fb;font-family:var(--mis-font-family,Sarabun,Tahoma,sans-serif);font-size:var(--mis-text-body,16px)}.um-root *{box-sizing:border-box}.um-root button,.um-root input,.um-root select,.um-root textarea{font:inherit}.um-root button{border:1px solid #cddde9;background:#fff;padding:8px 13px;border-radius:8px;color:#345973;cursor:pointer;line-height:1.4}.um-root button:hover:not(:disabled){background:#edf5fb;border-color:#74a7c9}.um-root button:focus-visible,.um-root :is(input,select,textarea):focus-visible{outline:3px solid #8ac6ef;outline-offset:2px}.um-root button:disabled{opacity:.48;cursor:not-allowed}.um-root button.primary{background:var(--mis-primary,#287daf);border-color:var(--mis-primary,#287daf);color:var(--mis-on-primary,#fff)}.um-root button.danger{background:#fff0f0;border-color:#e8abaa;color:#ae3036}.um-root button.approve{background:#e5f5ee;border-color:#b2d9c6;color:#24745c}.um-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 28px;background:white;border-bottom:1px solid #dce6ef}.um-heading h1{font-size:var(--mis-text-heading,26px);font-weight:700;margin:5px 0}.um-heading h1 i{color:var(--mis-primary,#287daf);margin-right:5px}.um-heading p{margin:0;color:#7e91a4}.um-eyebrow{color:#7e91a4;font-size:var(--mis-text-small,14px)}.um-heading-actions{display:flex;gap:8px;flex-shrink:0}.um-main{padding:24px 28px 40px;overflow-y:auto;min-height:0}.um-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}.um-root button.um-stat{padding:17px 20px;text-align:left;display:flex;flex-direction:column;gap:6px;border-color:#dce6ef;border-radius:12px}.um-stat strong{font-size:var(--mis-text-heading,26px)!important;line-height:1.3}.um-stat small{color:#8798a9}.um-stat.pending strong{color:#ae770d}.um-stat.rejected strong{color:#b34e50}.um-stat.active strong{color:#28785e}.um-stat.all strong{color:#297cac}.um-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid #d2e0eb;margin-bottom:20px}.um-root .um-tabs button{background:transparent;white-space:nowrap;border:0;border-bottom:3px solid transparent;border-radius:0;padding:13px 17px}.um-root .um-tabs button.selected{color:var(--mis-primary,#287daf);background:#eaf3fa;border-bottom-color:var(--mis-primary,#287daf);font-weight:700}.um-tabs span{display:inline-block;padding:0 6px;margin-left:7px;border-radius:5px;background:#e5eaf1}.um-toolbar{display:grid;grid-template-columns:minmax(200px,2fr) minmax(150px,1fr) minmax(150px,1fr) auto;gap:12px;align-items:end;margin-bottom:20px}.um-root label{display:flex;flex-direction:column;gap:6px;font-weight:500}.um-root :is(input:not([type=checkbox]),select,textarea){width:100%;min-width:0;padding:10px 12px;border:1px solid #ccdae8;border-radius:8px;background:#fff;color:#405468}.um-root input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--mis-primary,#287daf)}.um-toolbar button{min-height:46px}.um-card{background:#fff;border:1px solid #dce6ef;border-radius:12px;margin-bottom:22px;overflow:hidden}.um-card-title{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid #e7edf3}.um-root .um-card h2{font-size:var(--mis-text-section,22px)!important;margin:0;font-weight:700}.um-card-title>span{color:#8395a8;font-size:var(--mis-text-small,14px)}.um-table-scroll{overflow:auto;max-width:100%}.um-root table{border-collapse:collapse;width:100%;text-align:left}.um-users-table{min-width:1160px}.um-root th{background:#f3f7fb;color:#6d849a;font-weight:500;white-space:nowrap}.um-root td,.um-root th{padding:14px 15px;border-bottom:1px solid #e7edf3;vertical-align:top}.um-users-table td:nth-child(2){min-width:190px;max-width:235px}.um-users-table td:nth-child(3){min-width:130px;max-width:180px}.um-users-table td:nth-child(4){min-width:190px;max-width:240px}.um-users-table td:nth-child(5){min-width:190px;max-width:245px}.um-users-table td:last-child{min-width:180px}.um-root td strong{font-weight:600}.um-root td small,.um-root th small{display:block;color:#8796a6;overflow-wrap:anywhere;margin-top:4px}.um-pending-row{background:#fffcf4}.um-root .um-risk{color:#af7621}.um-root code{font-size:inherit;font-family:inherit;overflow-wrap:anywhere}.um-chips{display:flex;flex-wrap:wrap;gap:5px}.um-chips>span:not(.um-role-badge){display:inline-block;border:1px solid #dce7f0;background:#f0f5fa;border-radius:5px;padding:3px 7px;font-size:inherit!important;line-height:1.5}.um-chips>span.group{background:#e9f4f2;color:#37706b;border-color:#c9e3dd}.um-chips>button{padding:2px 6px;font-size:inherit!important}.um-badge{display:inline-block;padding:5px 9px;border:1px solid;border-radius:7px;white-space:nowrap;font-size:inherit!important}.um-badge.pending{background:#fff5d8;color:#a4741e;border-color:#edda9f}.um-badge.active{background:#eaf6ee;color:#347b58;border-color:#c6e4d2}.um-badge.suspended{background:#fff0f0;color:#b15053;border-color:#efcdce}.um-badge.deleted{background:#eff1f4;color:#748190;border-color:#d8dfe6}.um-row-actions{display:flex;flex-wrap:wrap;gap:6px}.um-row-actions button{padding:6px 9px;white-space:nowrap;font-size:var(--mis-text-small,14px)!important}.um-pager{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:16px 20px;color:#7a8da1}.um-pager>div{display:flex;gap:10px;align-items:center}.um-pager button{white-space:nowrap}.um-note,.um-message{padding:14px 18px;border-radius:9px;border:1px solid #d6e5f0;background:#edf5fb;margin:0 0 20px}.um-note p{margin:4px 0}.um-message.error{background:#fff1f1;color:#a9434c;border-color:#f1c9ce}.um-message.success{background:#e9f6ef;color:#327652;border-color:#cbe7d8}.um-empty{text-align:center;padding:35px;color:#8c9dac}.um-loading{color:#66849c}.um-content.loading{opacity:.55;pointer-events:none}.um-table-note{padding:0 20px;color:#8093a7}.um-matrix table{min-width:850px}.um-matrix th:not(:first-child){min-width:145px;max-width:190px;white-space:normal;text-align:center}.um-matrix td{text-align:center}.um-matrix th:first-child{position:sticky;left:0;min-width:230px;max-width:250px;background:#f6f9fc;z-index:1}.um-matrix .um-granted{background:#edf8f5;color:#27886b;font-weight:bold}.um-matrix tbody th>button{padding:0;border:0;background:transparent;text-align:left;color:#286f9e}.um-overlay{position:fixed;inset:0;z-index:300;background:#17304480;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}.um-dialog{width:min(880px,100%);max-height:92vh;display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 20px 80px #17304440;overflow:hidden}.um-dialog>header{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce6ef}.um-dialog h2{font-size:var(--mis-text-section,22px)!important;margin:0}.um-dialog h3{margin:24px 0 10px;font-size:var(--mis-text-section,22px)!important}.um-dialog form,.um-action-menu{padding:22px 24px;overflow-y:auto;min-height:0}.um-dialog fieldset{border:0;margin:0;padding:0;min-width:0}.um-dialog footer{display:flex;justify-content:flex-end;gap:8px;margin-top:24px;padding-top:16px;border-top:1px solid #e6edf4}.um-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.um-full{grid-column:1/-1}.um-password{display:flex;gap:6px}.um-password button{flex-shrink:0}.um-muted{color:#8798a9;font-size:var(--mis-text-small,14px)}.um-group-choices{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.um-group-choices label{flex-direction:row;align-items:center;border:1px solid #d8e3ec;padding:8px 12px;border-radius:7px}.um-role-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}.um-role-picker .um-role-option{display:flex;flex-direction:row;align-items:flex-start;gap:10px;border:1px solid #dbe5ed;padding:12px;border-radius:8px}.um-role-option.selected{background:#eef7fc;border-color:#7fb4d4}.um-role-option small{display:block;color:#8b9aab;font-size:inherit}.um-action-menu{display:flex;flex-direction:column;gap:10px}.um-action-menu p{margin:0 0 12px}.um-dialog form>fieldset>label{margin-bottom:14px}@media(max-width:1100px){.um-heading{align-items:flex-start;flex-direction:column}.um-toolbar{grid-template-columns:1fr 1fr}.um-stats{grid-template-columns:1fr 1fr}.um-heading-actions{flex-wrap:wrap}.um-pager{flex-wrap:wrap}}@media(max-width:600px){.um-heading,.um-main{padding:16px}.um-heading h1{font-size:var(--mis-text-heading,26px)!important}.um-toolbar{grid-template-columns:1fr}.um-card-title{align-items:flex-start;flex-direction:column}.um-form-grid,.um-role-options{grid-template-columns:1fr}.um-stats{gap:8px}.um-root button.um-stat{padding:12px}.um-overlay{padding:10px}.um-dialog{max-height:95vh}.um-dialog>header,.um-dialog form,.um-action-menu{padding:15px}.um-pager{padding:12px}.um-pager>div{gap:6px;flex-wrap:wrap}.um-dialog footer{flex-wrap:wrap}.um-heading-actions button{padding:8px 10px}}

/* Same role colors and collapsible categories as the original MIS role selector. */
.um-root .um-role-badge{display:inline-block;border-width:1px;border-style:solid;border-radius:5px;padding:3px 7px;font-size:inherit!important;line-height:1.5;white-space:normal}
.um-root .um-role-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0}
.um-role-tools>div{display:flex;gap:6px}.um-root .um-role-tools button{padding:5px 9px;font-size:var(--mis-text-small,14px)!important}
.um-root .um-role-section{border:1px solid #d7e5f2;border-radius:10px;overflow:hidden;margin-top:12px}
.um-root .um-role-section>summary{background:#eaf3ff;color:#284d75;padding:12px;cursor:pointer;font-weight:600;list-style:none}
.um-root .um-role-section>summary::before{content:'▸';display:inline-block;width:18px}.um-root .um-role-section[open]>summary::before{content:'▾'}
.um-role-section>summary>span{float:right;padding:0 7px;border-radius:5px;background:#dbeafb;color:#476b91;font-weight:400}
.um-role-section>summary:focus-visible{outline:3px solid #75afe2;outline-offset:-3px}
.um-root .um-role-option{cursor:pointer}.um-role-option>span{min-width:0}.um-role-option input{margin-top:4px}
.um-root .um-role-description{display:block;color:#64768a;font-size:var(--mis-text-small,14px)!important;margin-top:5px}
.um-users-table :is(th,td):nth-child(4){min-width:330px;width:32%;max-width:520px}
@media(max-width:600px){.um-role-tools{flex-wrap:wrap}.um-root .um-role-options{grid-template-columns:1fr}.um-role-section>summary{font-size:var(--mis-text-body,16px)!important}}

/* Permission matrix: keep both the column labels and person names in view. */
.um-root .um-matrix{max-height:65vh;max-height:clamp(280px,65vh,700px);isolation:isolate;overscroll-behavior:contain}
.um-matrix table{border-collapse:separate;border-spacing:0}
.um-root .um-matrix thead th{position:sticky;top:0;z-index:3;background:#f3f7fb;box-shadow:0 1px 0 #cbdbe8}
.um-root .um-matrix thead th:first-child{left:0;z-index:4;background:#eaf2f9}
.um-root .um-matrix tbody th:first-child{z-index:2;box-shadow:1px 0 0 #dce6ef}
.um-matrix:focus-visible,.um-chart-scroll:focus-visible{outline:3px solid #8ac6ef;outline-offset:-3px}
/* Horizontal role bars use the same palette as the table and editor. */
.um-dashboard .um-card-title p{margin:4px 0 0;color:#71869a;font-size:var(--mis-text-small,14px)}
.um-dashboard .um-card-title label{min-width:210px;font-size:var(--mis-text-small,14px)}
.um-dashboard .um-table-note{margin:14px 0;color:#61768b;font-size:var(--mis-text-small,14px)}
.um-chart-scroll{max-height:420px;overflow:auto;padding:0 20px 10px;overscroll-behavior:contain}
.um-chart-scale{display:flex;justify-content:space-between;margin-left:260px;margin-right:78px;color:#7b8d9e;font-size:var(--mis-text-small,14px)}
.um-bars{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.um-bar-row{display:grid;grid-template-columns:245px minmax(40px,1fr) 68px;gap:15px;align-items:center;min-height:38px}
.um-bar-row>.um-role-badge{justify-self:start;max-width:100%}
.um-bar-track{height:22px;background:#f1f5f9;border-radius:5px;overflow:hidden}
.um-bar-fill{display:block;height:100%;border-width:1px;border-style:solid;border-radius:5px}
.um-bar-value{text-align:right;white-space:nowrap;font-size:var(--mis-text-small,14px);font-variant-numeric:tabular-nums}
.um-bar-value small{display:block;font-size:var(--mis-text-small,14px);color:#7b8d9e}
.um-chart-footer{padding:12px 20px;border-top:1px solid #e7edf3;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--mis-text-small,14px);color:#71869a}
.um-chart-footer button{flex-shrink:0}
@media(max-width:600px){.um-chart-scroll{padding:0 15px 10px}.um-bar-row{grid-template-columns:minmax(100px,1fr) minmax(45px,1fr) 53px;gap:8px}.um-chart-scale{display:none}.um-chart-footer{flex-wrap:wrap}.um-dashboard .um-card-title label{width:100%;min-width:0}.um-dashboard .um-table-note{padding:0 15px}}

.um-root .um-bar-fill{background:currentColor;opacity:.8}

/* Typography contract: the six System Settings sizes own every text context. */
@media screen {
html[data-mis-typography] body .um-root{font-family:var(--mis-font-family)!important;font-size:var(--mis-text-body)!important}
html[data-mis-typography] body .um-root :is(button,input,select,textarea){font-size:var(--mis-text-body)!important}
html[data-mis-typography] body .um-root .um-tabs :where(button,span){font-size:var(--mis-text-menu)!important}
html[data-mis-typography] body .um-root :is(.um-eyebrow,.um-muted,.um-card-title>span,.um-table-note,.um-chart-footer,.um-role-description,.um-role-option small){font-size:var(--mis-text-small)!important}
html[data-mis-typography] body .um-root :is(table,th,td),
html[data-mis-typography] body .um-root :is(th,td) :where(span,div,p,a,strong,small,b,label,button,input,select,code){font-size:var(--mis-text-table)!important}
html[data-mis-typography] body .um-root .um-chart-scroll,
html[data-mis-typography] body .um-root .um-chart-scroll :where(span,strong,small,li){font-size:var(--mis-text-chart)!important}
html[data-mis-typography] body .um-root .um-stat strong{font-family:var(--mis-font-family)!important;font-size:var(--mis-text-heading)!important}
}
/* Columns grow with their configured text instead of clipping large fonts. */
.um-root :is(.um-bar-row,.um-chart-scale){--um-chart-label:clamp(180px,18em,360px);--um-chart-value:max(68px,5em);font-size:var(--mis-text-chart,14px)}
.um-bar-row{grid-template-columns:var(--um-chart-label) minmax(40px,1fr) var(--um-chart-value)}
.um-chart-scale{margin-left:calc(var(--um-chart-label) + 15px);margin-right:calc(var(--um-chart-value) + 15px)}
.um-root .um-bar-track{height:max(22px,1.2em)}
.um-root .um-role-option small{overflow-wrap:anywhere}
.um-root .um-dialog>header h2{min-width:0;overflow-wrap:anywhere}
.um-root .um-dialog>header button{flex-shrink:0}
.um-root .um-role-section>summary{display:flex;align-items:center;gap:6px}
.um-root .um-role-section>summary::before{flex-shrink:0}
.um-root .um-role-section>summary>span{float:none;flex-shrink:0;margin-left:auto}
@media(max-width:600px){
 .um-root .um-heading h1{overflow-wrap:anywhere}
 .um-root .um-stat{min-width:0;overflow-wrap:anywhere}
 .um-root .um-chart-scale{display:none}
 .um-root .um-bar-row{grid-template-columns:minmax(0,1fr) max(60px,4.8em);row-gap:5px;column-gap:8px}
 .um-bar-row>.um-role-badge{grid-column:1;grid-row:1}
 .um-root .um-bar-track{grid-column:1;grid-row:2}
 .um-root .um-bar-value{grid-column:2;grid-row:1 / span 2;align-self:center}
 .um-root .um-chart-footer{flex-direction:column;align-items:flex-start}
}

/* Group removal is staged in the editor until the account is saved. */
.um-selected-groups{border:1px solid #d6e5f0;border-radius:9px;padding:14px;background:#f7fafc}
.um-selected-group-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.um-root .um-selected-group{display:inline-flex!important;align-items:center;gap:8px;max-width:100%;overflow-wrap:anywhere}
.um-root .um-selected-group button{padding:2px 7px;background:#fff;font-size:inherit!important;flex-shrink:0}
.um-selected-groups>.um-muted{margin-bottom:0}

/* Identify the source without changing the checkbox's direct-grant meaning. */
.um-role-option .um-role-source{display:table;font-size:var(--mis-text-small,14px);line-height:1.45;margin-top:4px;padding:2px 7px;border-radius:5px}.um-role-option .um-role-source.from-group{background:#e6f3ef;color:#25675d}.um-role-option .um-role-source.from-direct{background:#e9f1fd;color:#315c94}.um-role-description{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.65;margin-top:6px}.um-heading-actions{flex-wrap:wrap}