/* roles.css – modern, professional admin UI */

:root{
  --bg: #0b1020;
  --surface: rgba(255,255,255,0.06);
  --surface2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.10);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.60);
  --muted2: rgba(255,255,255,0.45);
  --shadow: 0 18px 60px rgba(0,0,0,0.40);
  --shadow2: 0 10px 26px rgba(0,0,0,0.28);
  --r: 18px;
  --r2: 14px;
  --accent: #ff2d7a;
  --blue: #7aa7ff;
  --radius: 18px;
  --radius-sm: 14px;

  --shadow: 0 18px 60px rgba(0,0,0,0.42);
  --shadow-soft: 0 12px 30px rgba(0,0,0,0.28);

  --accent: #ff2d7a;
  --accent-2: #7aa7ff;

  --ring: 0 0 0 4px rgba(255,45,122,0.18);
}

.admin-wrap{
  max-width: 1220px;
  margin: 0 auto;
  padding: 24px 18px;
}

/* ---------- Top header ---------- */
.admin-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.admin-h1{
  font-size: 22px;
  margin: 0;
  letter-spacing: .2px;
}
.admin-sub{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.admin-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.admin-chip{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  box-shadow: var(--shadow-soft);
}
.admin-chip .dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #44ff9a;
  box-shadow: 0 0 0 6px rgba(68,255,154,0.10);
}
.admin-chip .dot.dot-blue{
  background: var(--accent-2);
  box-shadow: 0 0 0 6px rgba(122,167,255,0.12);
}

/* ---------- Cards ---------- */
.admin-card{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    radial-gradient(1200px 500px at 0% 0%, rgba(122,167,255,0.10), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(255,45,122,0.10), transparent 55%),
    rgba(255,255,255,0.05);
  box-shadow: var(--shadow);
  padding: 16px;
}

.admin-card--tight{ margin-bottom: 14px; }

.card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.card-title{
  margin: 0;
  font-size: 16px;
  letter-spacing: .2px;
}
.muted{
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Inputs / buttons ---------- */
.admin-input{
  height: 42px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.28);
  color: var(--text);
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.admin-input::placeholder{ color: var(--muted-2); }
.admin-input:focus{
  border-color: rgba(255,255,255,0.18);
  box-shadow: var(--ring);
  background: rgba(0,0,0,0.34);
}

.btn, .btn-primary, .btn-ghost, .btn-danger{
  height: 42px;
  border-radius: var(--radius-sm);
}

.btn-ghost{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.07); }

.btn-primary{
  background: linear-gradient(180deg, rgba(255,45,122,0.95), rgba(255,45,122,0.78));
  border: 1px solid rgba(255,45,122,0.40);
  box-shadow: 0 16px 45px rgba(255,45,122,0.20);
}
.btn-primary:hover{ filter: brightness(1.03); }

.btn-danger{
  border: 1px solid rgba(255, 70, 70, 0.35);
  background: rgba(255, 70, 70, 0.14);
}
.btn-danger:hover{ background: rgba(255, 70, 70, 0.22); }

/* Create role row */
.role-create{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
.role-create .admin-input{
  flex: 1;
  min-width: 260px;
  max-width: 460px;
}

/* ---------- Roles layout ---------- */
.roles-layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  align-items:start;
}

.roles-list{ position: relative; z-index: 2; }
.role-editor{ position: relative; z-index: 1; }

/* Role pills */
.roles-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.role-pill{
  width:100%;
  text-align:left;
  cursor:pointer;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.22);
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.role-pill:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
.role-pill.active{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}
.role-pill-name{ display:block; font-weight: 850; font-size: 14px; }
.role-pill-sub{ display:block; margin-top: 4px; color: var(--muted); font-size: 12px; }

/* ---------- Panels ---------- */
.role-panel{ display:none; }
.role-panel.active{ display:block; }

.role-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap:wrap;
}
.role-title{
  font-size: 16px;
  font-weight: 850;
  letter-spacing: .2px;
}

.role-panel-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.role-rename{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap:wrap;
}
.role-rename .admin-input{ width: 240px; }

/* ---------- Search row ---------- */
.card-tools{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
#perm-search{ width: min(460px, 100%); }

/* ---------- Toolbar ---------- */
.perm-toolbar{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.perm-toolbar .btn-ghost{
  height: 34px;
  border-radius: 999px;
  padding: 0 12px;
}

/* ---------- Groups ---------- */
.perm-group{ margin-bottom: 16px; }

.perm-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.perm-group-title{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,0.72);
  font-weight: 900;
}

.perm-group-actions{
  display:flex;
  gap: 8px;
  align-items:center;
}
.linkbtn{
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.88);
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease;
}
.linkbtn:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
}

/* ---------- Permission grid/cards ---------- */
.perm-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 10px;
}

.perm-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.22);
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.perm-card:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.perm-name{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .15px;
}

.perm-check{
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* ---------- Save bar ---------- */
.savebar{
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap:wrap;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border-2);
  background: rgba(12, 16, 26, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  margin-top: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .admin-top{ flex-direction:column; align-items:stretch; }
  .admin-actions{ justify-content:flex-start; }
  .roles-layout{ grid-template-columns: 1fr; }
  .perm-grid{ grid-template-columns: 1fr; }
  .role-rename .admin-input{ width: min(360px, 100%); }
}


/* wrapper */
.rbac-wrap{
  max-width: 1220px;
  margin: 0 auto;
  padding: 24px 18px;
}

/* top */
.rbac-top{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  align-items:flex-start;
  margin-bottom: 14px;
}
.rbac-title{ margin:0; font-size: 22px; letter-spacing: .2px; }
.rbac-sub{ margin: 6px 0 0; color: var(--muted); }

.rbac-stats{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.rbac-pill{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  box-shadow: var(--shadow2);
}
.rbac-dot{ width:8px;height:8px;border-radius:999px;background:#44ff9a; box-shadow:0 0 0 6px rgba(68,255,154,0.10); }
.rbac-dot.blue{ background: var(--blue); box-shadow:0 0 0 6px rgba(122,167,255,0.12); }

/* cards */
.rbac-card{
  border: 1px solid var(--border);
  border-radius: var(--r);
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(122,167,255,0.10), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(255,45,122,0.10), transparent 55%),
    rgba(255,255,255,0.05);
  box-shadow: var(--shadow);
  padding: 16px;
}
.rbac-card--tight{ margin-bottom: 14px; }
.rbac-cardhead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  flex-wrap:wrap;
}

.rbac-h2{ margin:0; font-size: 16px; }
.rbac-muted{ color: var(--muted); font-size: 13px; }

.rbac-input{
  height: 42px;
  padding: 0 12px;
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.26);
  color: var(--text);
  outline: none;
}
.rbac-input::placeholder{ color: var(--muted2); }
.rbac-input:focus{
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 0 0 4px rgba(255,45,122,0.18);
}

/* create */
.rbac-create{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.rbac-create .rbac-input{ min-width: 260px; flex: 1; max-width: 420px; }

/* grid */
.rbac-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  align-items:start;
}

/* left */
.rbac-roles{ position: relative; z-index: 2; }
.rbac-rolelist{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.rbac-role{
  width:100%;
  text-align:left;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.20);
  cursor:pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.rbac-role:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.rbac-role.active{ background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); box-shadow: var(--shadow2); }
.rbac-role-name{ font-weight: 850; }
.rbac-role-meta{ margin-top:4px; color: var(--muted); font-size: 12px; }

.rbac-help{ margin-top: 12px; }

/* editor */
.rbac-editor{ position: relative; z-index: 1; }
.rbac-panel{ display:none; }
.rbac-panel.active{ display:block; }

.rbac-panel-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.rbac-panel-title{ font-weight: 900; font-size: 16px; }

.rbac-panel-actions{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.rbac-rename{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.rbac-rename .rbac-input{ width: 240px; }

/* toolbar */
.rbac-toolbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding: 12px 0 0;
}
.rbac-count{ margin-left:auto; color: var(--muted); font-size: 13px; }

/* groups */
.rbac-group{ margin-top: 14px; }
.rbac-grouphead{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-bottom: 10px;
}
.rbac-groupname{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,0.72);
  font-weight: 900;
}
.rbac-groupactions{ display:flex; gap:8px; }
.rbac-mini{
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.88);
  cursor:pointer;
}
.rbac-mini:hover{ background: rgba(255,255,255,0.07); }

/* permission chips */
.rbac-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.rbac-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  cursor:pointer;
  user-select:none;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.rbac-chip:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.rbac-check{
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.rbac-chiptext{ font-weight: 800; font-size: 13px; }

/* save */
.rbac-save{
  position: sticky;
  bottom: 12px;
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(12,16,26,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap:wrap;
}

/* empty */
.rbac-empty{ padding: 14px; border: 1px dashed rgba(255,255,255,0.14); border-radius: var(--r); margin-top: 14px; }
.rbac-empty-title{ font-weight: 900; margin-bottom: 6px; }
/* ===============================
   HARD FIX: users table layout
   paste at the very bottom of admin.css
================================== */

.admin-card .admin-table-wrap{
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: block !important;
}

/* force table semantics even if global css breaks it */
.admin-card .admin-table-wrap table#users-table{
  width: 100% !important;
  min-width: 980px !important;         /* stable base – scroll on small screens */
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;      /* key */
  display: table !important;
}

.admin-card .admin-table-wrap table#users-table thead{
  display: table-header-group !important;
}
.admin-card .admin-table-wrap table#users-table tbody{
  display: table-row-group !important;
}
.admin-card .admin-table-wrap table#users-table tr{
  display: table-row !important;       /* blocks “tr {display:flex}” bugs */
}
.admin-card .admin-table-wrap table#users-table th,
.admin-card .admin-table-wrap table#users-table td{
  display: table-cell !important;      /* blocks “td {display:flex/block}” bugs */
  vertical-align: middle !important;
  padding: 12px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* column widths (match your header widths) */
.admin-card .admin-table-wrap table#users-table th:nth-child(1),
.admin-card .admin-table-wrap table#users-table td:nth-child(1){
  width: 90px !important;
  white-space: nowrap !important;
}
.admin-card .admin-table-wrap table#users-table th:nth-child(3),
.admin-card .admin-table-wrap table#users-table td:nth-child(3){
  width: 260px !important;
}
.admin-card .admin-table-wrap table#users-table th:nth-child(4),
.admin-card .admin-table-wrap table#users-table td:nth-child(4){
  width: 160px !important;
}

/* user cell – prevent flex overflow */
.admin-card .admin-table-wrap .user-cell{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;             /* allows ellipsis */
}

.admin-card .admin-table-wrap .user-avatar img{
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  flex: 0 0 auto !important;
}

.admin-card .admin-table-wrap .user-meta{
  min-width: 0 !important;
}
.admin-card .admin-table-wrap .user-name{
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* select + button must NOT stretch the table */
.admin-card .admin-table-wrap .role-select{
  width: 100% !important;
  max-width: 100% !important;
  height: 40px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(0,0,0,0.22) !important;
  color: rgba(255,255,255,0.9) !important;
  outline: none !important;
}

.admin-card .admin-table-wrap .role-save-btn{
  width: 100% !important;
  height: 40px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

/* hover */
.admin-card .admin-table-wrap table#users-table tbody tr:hover{
  background: rgba(255,255,255,0.04) !important;
}
.warn-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  .warn-grid{ grid-template-columns: 1fr; }
}

.warn-form{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.wlabel{
  font-weight: 800;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.warn-form textarea{
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.35;
}

.wactions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 4px;
}

.locked-list{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.locked-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
}
.locked-user{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}
.locked-ava{
  width:40px;height:40px;border-radius:999px;object-fit:cover;flex:0 0 auto;
}
.locked-name{
  font-weight: 900;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.mono{
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.team-text {
  color: gold;
  font-style: italic;
  font-weight: bold; /* optional */
}