/* ER Call Center · Mitarbeiterrollen: unified light UI 2026-10-30 */
.ercc-roles{min-width:0;color:#19375c;display:grid;gap:12px}
.ercc-roles *{box-sizing:border-box}
.ercc-roles-head{
 display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
 padding:20px 22px;background:linear-gradient(120deg,#fff,#f1f7ff);
 border:1px solid #dce8f6;border-radius:14px;
}
.ercc-roles-head>div{flex:1 1 230px;min-width:0}
.ercc-roles-head small{display:block;font-size:10px;font-weight:850;letter-spacing:.1em;color:#497db5}
.ercc-roles-head h3{margin:8px 0;font-size:clamp(20px,3vw,26px);color:#17365e;letter-spacing:-.025em;line-height:1.16}
.ercc-roles-head p{margin:0;color:#627c9c;font-size:12px;line-height:1.55}
.ercc-roles button,.ercc-roles input,.ercc-roles select{font:inherit}
.ercc-roles-refresh,.ercc-roles-more{
 padding:11px 14px;border:1px solid #cee0f4;color:#1764c8;
 background:#fff;min-height:44px;border-radius:9px;cursor:pointer;font-weight:780;font-size:12px;
}
.ercc-roles-refresh:hover,.ercc-roles-more:hover{background:#eaf3ff}
.ercc-roles-help{
 padding:13px 15px;color:#4b6685;background:#edf5ff;
 border-left:4px solid #4085e9;margin:0;border-radius:9px;font-size:12px;line-height:1.6;
}
.ercc-roles-notice:not([hidden]){
 padding:12px 14px;margin:0;border:1px solid #f0d3a0;
 color:#815b24;background:#fff7e7;border-radius:9px;font-size:12px;line-height:1.5;
}
.ercc-roles-notice.is-success{border-color:#bce8d4;background:#e8f8ef;color:#097b53}
.ercc-roles-search{
 box-sizing:border-box;display:block;width:100%;min-height:46px;
 background:#fff;border:1px solid #cfdfef;color:#213d5c;
 border-radius:10px;padding:11px 13px;font-size:16px!important;margin:0;
}
.ercc-roles-search::placeholder{color:#8297b0}
.ercc-roles-list{display:grid;gap:10px;min-width:0}
.ercc-roles-row{
 display:flex;justify-content:space-between;align-items:center;gap:16px;
 padding:15px 17px;background:#fff;border:1px solid #dae5f1;
 border-radius:12px;min-width:0;box-shadow:0 3px 10px rgba(33,84,134,.03);
}
.ercc-roles-identity{display:grid;gap:5px;min-width:0;overflow-wrap:anywhere;flex:1 1 auto}
.ercc-roles-identity strong{font-size:14px;color:#1a355a}
.ercc-roles-identity small{font-size:11px;color:#6d859f;overflow-wrap:anywhere}
.ercc-roles-current{margin-top:3px;color:#2873ca;font-size:11px;font-weight:750}
.ercc-roles-editor{display:flex;align-items:center;gap:9px;flex:0 1 auto}
.ercc-roles-select{
 background:#f8fbff;color:#24415f;border:1px solid #cbdced;
 min-width:144px;min-height:44px;border-radius:9px;padding:9px 10px;font-size:14px!important;
}
.ercc-roles-save{
 border:1px solid #1468e5;min-height:44px;border-radius:9px;padding:10px 14px;
 background:#1468e5;color:#fff;cursor:pointer;
 font-size:12px!important;font-weight:850;white-space:nowrap;
}
.ercc-roles-save:hover:not(:disabled){background:#0753c7}
.ercc-roles-save:disabled{opacity:.47;cursor:not-allowed;background:#8aa7cf;border-color:#8aa7cf}
.ercc-roles-protected{color:#69819b;font-size:11px;text-align:right;line-height:1.4}
.ercc-roles-more{display:block;justify-self:center;margin:3px auto}
.ercc-roles-more[hidden]{display:none!important}
.ercc-roles-empty{
 color:#6c849d;background:#fff;border:1px dashed #d1deed;
 border-radius:10px;padding:23px;text-align:center;font-size:13px;
}
.ercc-roles button:focus-visible,.ercc-roles select:focus-visible,
.ercc-roles input:focus-visible{outline:3px solid #8dc1ff;outline-offset:2px}
@media(max-width:740px){
 .ercc-roles-head{padding:15px}
 .ercc-roles-head h3{font-size:21px}
 .ercc-roles-row{align-items:stretch;flex-direction:column;padding:14px}
 .ercc-roles-editor{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto}
 .ercc-roles-select{width:100%;min-width:0}
 .ercc-roles-save{min-width:109px}
 .ercc-roles-protected{text-align:left}
}
@media(max-width:380px){
 .ercc-roles-row{padding:12px}
 .ercc-roles-editor{grid-template-columns:1fr}
 .ercc-roles-save{width:100%}
}