/* ════════════════════════════════════════════════════════════
 * roles.css — B1 Rol editörü (Sunucu Ayarları İÇİNDE, görsel 1.png)
 *  Liste + sekmeli "ROLÜ DÜZENLE" (Görünüm/İzinler/Bağlantılar/Üyeleri Yönet)
 *  Renkler Discord koyu temasıyla (overlay.css #313338) uyumlu.
 * ════════════════════════════════════════════════════════════ */

/* Roller sayfası tam genişlik kullansın (sso-content max-width/padding sıfırla) */
.sso-content.sso-content--roles{max-width:none;padding:0;}

.ssorole-wrap{display:flex;height:100%;min-height:0;}

/* ── Sol rol listesi ── */
.ssorole-list{
  width:232px;flex-shrink:0;border-right:1px solid rgba(0,0,0,.25);
  display:flex;flex-direction:column;background:rgba(0,0,0,.05);
}
.ssorole-list-head{
  display:flex;align-items:center;gap:8px;
  padding:18px 10px 8px 18px;
  font-size:12px;font-weight:700;letter-spacing:.02em;color:#b5bac1;text-transform:uppercase;
}
.ssorole-list-head span{flex:1;}
.ssorole-add{
  width:24px;height:24px;border:none;border-radius:4px;cursor:pointer;flex-shrink:0;
  background:transparent;color:#b5bac1;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;
}
.ssorole-add:hover{background:#5865f2;color:#fff;}
.ssorole-list-body{flex:1;overflow-y:auto;padding:4px 8px 16px;}
.ssorole-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:4px;cursor:pointer;transition:background .1s;
}
.ssorole-item:hover{background:rgba(255,255,255,.04);}
.ssorole-item.active{background:rgba(255,255,255,.08);}
.ssorole-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.ssorole-name{flex:1;font-size:15px;font-weight:500;color:#dbdee1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ssorole-item.active .ssorole-name{color:#fff;}
.ssorole-count{font-size:12px;color:#949ba4;flex-shrink:0;}
.ssorole-empty{padding:20px 14px;color:#949ba4;font-size:13px;text-align:center;}

/* ── Sağ editör ── */
.ssorole-editor{flex:1;display:flex;flex-direction:column;min-width:0;}
.ssorole-noselect{margin:auto;color:#949ba4;font-size:14px;padding:40px;text-align:center;}
.ssorole-ed-head{
  display:flex;align-items:center;gap:12px;
  padding:22px 28px 14px;
}
.ssorole-ed-title{
  flex:1;font-size:16px;font-weight:700;color:#f2f3f5;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ssorole-del{
  width:32px;height:32px;flex-shrink:0;border:none;border-radius:4px;cursor:pointer;
  background:transparent;color:#b5bac1;display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;
}
.ssorole-del:hover{background:rgba(242,63,67,.16);color:#f23f43;}

/* Sekmeler */
.ssorole-tabs{
  display:flex;gap:24px;padding:0 28px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ssorole-tab{
  background:none;border:none;cursor:pointer;
  padding:0 0 10px;font-size:15px;font-weight:500;color:#b5bac1;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s;
}
.ssorole-tab:hover{color:#dbdee1;}
.ssorole-tab.active{color:#fff;border-bottom-color:#5865f2;}

.ssorole-tabbody{flex:1;overflow-y:auto;padding:22px 28px 60px;}
.ssorole-tabbody::-webkit-scrollbar{width:8px;}
.ssorole-tabbody::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px;}

/* ── Görünüm sekmesi ── */
.ssorole-label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:#b5bac1;margin:0 0 8px;
}
.ssorole-label:not(:first-child){margin-top:24px;}
.ssorole-input{
  width:100%;box-sizing:border-box;background:#1e1f22;border:1px solid rgba(0,0,0,.3);
  border-radius:3px;padding:10px 12px;font-size:15px;color:#dbdee1;outline:none;transition:border-color .12s;
}
.ssorole-input:focus{border-color:#5865f2;}
.ssorole-color-grid{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.ssorole-color-custom{
  position:relative;width:48px;height:48px;border-radius:4px;cursor:pointer;flex-shrink:0;
  border:1px solid rgba(0,0,0,.3);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.ssorole-color-custom::after{content:"🎨";font-size:18px;}
.ssorole-color-custom input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;border:none;padding:0;}
.ssorole-swatch{
  width:48px;height:48px;border-radius:4px;cursor:pointer;border:2px solid transparent;
  flex-shrink:0;transition:transform .08s;
}
.ssorole-swatch:hover{transform:scale(1.06);}
.ssorole-swatch.active{border-color:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.4);}
.ssorole-swatch-clear{
  background:#2b2d31;color:#b5bac1;font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.ssorole-swatch-clear:hover{color:#f23f43;}

/* ── İzinler sekmesi ── */
.ssorole-search{
  display:flex;align-items:center;gap:10px;
  background:#1e1f22;border:1px solid rgba(0,0,0,.3);border-radius:6px;
  padding:0 12px;margin-bottom:8px;
}
.ssorole-search svg{color:#949ba4;flex-shrink:0;}
.ssorole-search input{
  flex:1;background:none;border:none;outline:none;
  padding:12px 0;font-size:15px;color:#dbdee1;
}
.ssorole-perm-cat{
  font-size:18px;font-weight:600;color:#f2f3f5;
  margin:24px 0 4px;
}
.ssorole-perm{
  display:flex;align-items:flex-start;gap:16px;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.ssorole-perm-txt{flex:1;min-width:0;}
.ssorole-perm-name{font-size:16px;font-weight:600;color:#f2f3f5;margin-bottom:4px;}
.ssorole-perm-desc{font-size:14px;line-height:1.4;color:#b5bac1;}

/* Toggle switch (Discord blurple) */
.ssorole-toggle{
  flex-shrink:0;width:40px;height:24px;border-radius:14px;border:none;cursor:pointer;
  background:#80848e;padding:0;position:relative;transition:background .15s;margin-top:2px;
}
.ssorole-toggle.on{background:#5865f2;}
.ssorole-knob{
  position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.ssorole-toggle.on .ssorole-knob{transform:translateX(16px);}

/* ── Bağlantılar sekmesi (boş durum) ── */
.ssorole-links-empty{padding:48px 8px;text-align:center;}
.ssorole-links-title{font-size:16px;font-weight:600;color:#dbdee1;margin-bottom:6px;}
.ssorole-links-sub{font-size:14px;color:#949ba4;}

/* ── Üyeleri Yönet sekmesi ── */
.ssorole-add-row{display:flex;gap:8px;margin-bottom:16px;}
.ssorole-add-row .ssorole-input{flex:1;}
.ssorole-members{display:flex;flex-direction:column;gap:2px;}
.ssorole-member{
  display:flex;align-items:center;gap:12px;
  padding:8px 10px;border-radius:4px;transition:background .1s;
}
.ssorole-member:hover{background:rgba(255,255,255,.04);}
.ssorole-member-name{flex:1;font-size:15px;font-weight:500;color:#f2f3f5;}
.ssorole-member-rm{
  width:28px;height:28px;border:none;border-radius:4px;cursor:pointer;flex-shrink:0;
  background:transparent;color:#949ba4;font-size:15px;
  display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;
}
.ssorole-member-rm:hover{background:rgba(242,63,67,.16);color:#f23f43;}

/* ── Mobil ── */
@media (max-width:768px){
  .ssorole-list{width:148px;}
  .ssorole-ed-head,.ssorole-tabs,.ssorole-tabbody{padding-left:16px;padding-right:16px;}
  .ssorole-tabs{gap:14px;overflow-x:auto;}
  .ssorole-tab{white-space:nowrap;font-size:14px;}
}