/* WarDrix 1.31.0 - Rollen und Rechte 2.0 (Tabs, Suche, Gruppen, Mitglieder, Vorschau) */

/* Tabs Rollen / Mitglieder */
.rr-tabs{display:flex;gap:6px;margin:0 0 12px}
.rr-tab{display:inline-flex;align-items:center;gap:7px;border:1px solid #ffffff14;background:#ffffff07;color:#c9cdd6;border-radius:10px;padding:9px 15px;font-size:13.5px;font-weight:600;cursor:pointer}
.rr-tab .material-symbols-rounded{font-size:19px}
.rr-tab:hover{border-color:#f9731659;color:#fff}
.rr-tab.active{background:#f973161f;border-color:#f97316aa;color:#fff}
.rr-panel{min-width:0}

/* Editor Kopf mit Aktionen */
.role-editor-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.role-editor-title-copy{min-width:0}
.role-editor-title-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.role-preview-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #f9731666;background:#f973161a;color:#fdba74;border-radius:9px;padding:8px 13px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.role-preview-btn .material-symbols-rounded{font-size:18px}
.role-preview-btn:hover{background:#f973162e;color:#fff;border-color:#f97316}

/* Werkzeugleiste: Suche + Nur aktive */
.role-perm-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 10px}
.role-perm-search{display:flex;align-items:center;gap:7px;flex:1 1 240px;min-width:0;border:1px solid #3a3f46;border-radius:9px;background:#121318;padding:0 11px}
.role-perm-search .material-symbols-rounded{color:#8b929d;font-size:19px;flex:0 0 auto}
.role-perm-search input{flex:1;min-width:0;border:0;background:transparent;color:#e9eaee;font:inherit;font-size:13.5px;padding:9px 0;outline:none}
.role-perm-activeonly{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;cursor:pointer;color:#c9cdd6;font-size:12.5px;white-space:nowrap}
.role-perm-activeonly input{position:absolute;opacity:0;width:0;height:0}
.role-perm-activeonly .switch-ui{position:relative;width:38px;height:21px;border-radius:999px;background:#3a3f46;flex:0 0 auto;transition:background .15s}
.role-perm-activeonly .switch-ui::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#e9eaee;transition:transform .15s}
.role-perm-activeonly input:checked+.switch-ui{background:#f97316}
.role-perm-activeonly input:checked+.switch-ui::after{transform:translateX(17px)}

/* Rechte Gruppen */
.permission-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.permission-group-acts{display:flex;gap:6px;flex:0 0 auto}
.pg-bulk{border:1px solid #ffffff1c;background:#ffffff08;color:#c3c8d0;border-radius:7px;padding:4px 9px;font-size:11px;font-weight:600;cursor:pointer}
.pg-bulk:hover{border-color:#f9731677;color:#fff}
.permission-empty{padding:22px 10px;text-align:center;color:#9aa0ab;font-size:13px;border:1px dashed #ffffff1c;border-radius:10px}
.permission-switch-danger strong{color:#fca5a5}

/* Dreistufige Steuerung (Mitglieder) */
.permission-groups-tri .permission-group{display:grid;gap:4px}
.permission-tri-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:9px;border:1px solid #ffffff10;background:#ffffff04}
.permission-tri-row:hover{border-color:#ffffff1f}
.permission-tri-control{display:inline-flex;flex:0 0 auto;border:1px solid #3a3f46;border-radius:8px;overflow:hidden}
.permission-tri-btn{width:34px;height:30px;border:0;border-right:1px solid #3a3f46;background:#161820;color:#9aa0ab;font-size:15px;font-weight:700;cursor:pointer;line-height:1}
.permission-tri-btn:last-child{border-right:0}
.permission-tri-btn:hover{background:#1f222c;color:#e9eaee}
.permission-tri-btn.tri-deny.active{background:#e5534b;color:#fff}
.permission-tri-btn.tri-inherit.active{background:#3a3f46;color:#fff}
.permission-tri-btn.tri-allow.active{background:#22c55e;color:#06220f}

/* Mitglieder Liste */
.rr-member-search{display:flex;align-items:center;gap:7px;border:1px solid #3a3f46;border-radius:9px;background:#121318;padding:0 11px;margin:0 0 9px}
.rr-member-search .material-symbols-rounded{color:#8b929d;font-size:19px}
.rr-member-search input{flex:1;min-width:0;border:0;background:transparent;color:#e9eaee;font:inherit;font-size:13.5px;padding:9px 0;outline:none}
.rr-member-list{max-height:none}
.rr-member-item{align-items:center;grid-template-columns:32px minmax(0,1fr) 14px!important}
.rr-member-avatar{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:#5865f2;color:#fff;font-size:13px;font-weight:700;overflow:hidden}
.rr-member-avatar img{width:100%;height:100%;object-fit:cover}
.rr-role-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.rr-role-chip{font-size:10.5px;font-weight:700;color:#e9eaee;border:1px solid var(--chip,#888);border-radius:999px;padding:2px 9px;background:color-mix(in srgb,var(--chip,#888) 20%,transparent)}

/* Vorschau Banner */
.perm-preview-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:99999;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);box-sizing:border-box;padding:11px 14px;border-radius:12px;border:1px solid #f9731688;background:linear-gradient(180deg,#2a1a0c,#1b1206);box-shadow:0 18px 50px #000a}
.perm-preview-banner>.material-symbols-rounded{color:#fdba74;font-size:22px;flex:0 0 auto}
.perm-preview-text{min-width:0}
.perm-preview-text strong{display:block;color:#fff;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perm-preview-text small{display:block;color:#d9b48f;font-size:11.5px;line-height:1.35}
.perm-preview-exit{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;border:0;border-radius:9px;padding:9px 14px;background:#f97316;color:#1a0d02;font-weight:700;font-size:12.5px;cursor:pointer}
.perm-preview-exit .material-symbols-rounded{font-size:18px}
.perm-preview-exit:hover{background:#fb923c}

/* Responsiv: schmale Fenster, nichts ueberlappt */
@container (max-width:680px){
  .role-settings-layout{grid-template-columns:1fr!important}
  .role-editor-title-actions{width:100%}
  .role-preview-btn{flex:1}
  .role-perm-toolbar{flex-direction:column;align-items:stretch}
  .role-perm-search{flex:0 0 auto}
}
@media (max-width:680px){
  .role-settings-layout{grid-template-columns:1fr!important}
  .rr-tab{flex:1;justify-content:center;min-width:0}
  .role-editor-title{flex-direction:column;align-items:stretch}
  .role-editor-title-actions{width:100%}
  .role-perm-toolbar{flex-direction:column;align-items:stretch}
  .role-perm-search{flex:0 0 auto}
  .role-perm-activeonly{justify-content:space-between}
  .permission-group-head{flex-wrap:wrap}
  .permission-tri-row{flex-wrap:wrap;gap:8px}
  .perm-preview-banner{flex-wrap:wrap;left:12px;right:12px;transform:none;max-width:none}
  .perm-preview-exit{width:100%;justify-content:center}
}