/* F15.20.46 — Users Management Modal UX */

/* ===== ROLES IDLE VIEW ===== */

#customRolesList{
  display:block;
  width:100%;
}

#customRolesList .role-list-section{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:15px;
  background:rgba(127,127,127,.018);
}

#customRolesList .role-list-section + .role-list-section{
  margin-top:14px;
}

#customRolesList .role-list-heading{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:28px;
  padding:0 3px;
}

#customRolesList .role-list-heading span{
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
}

#customRolesList .role-card{
  min-width:0;
  min-height:154px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:15px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--panel);
  box-shadow:0 7px 18px rgba(15,23,42,.035);
  transition:.16s ease;
}

#customRolesList .role-card:hover{
  transform:translateY(-1px);
  border-color:rgba(18,191,166,.32);
  box-shadow:0 12px 26px rgba(15,23,42,.07);
}

#customRolesList .role-card-title-row{
  flex-wrap:wrap;
  gap:5px;
}

#customRolesList .role-card-copy>span,
#customRolesList .role-card-copy>small{
  display:block;
  margin-top:5px;
}

#customRolesList .role-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px;
  padding-top:11px;
  border-top:1px solid var(--border);
}

#customRolesList .role-card-button{
  min-height:30px;
  padding:6px 10px;
}

/* ===== POSITIONS IDLE VIEW ===== */

#attendancePayPanel .attendance-pay-layout{
  display:block!important;
}

#attendancePayRateList{
  width:100%;
}

/* ===== SHARED MODAL ===== */

.users-management-modal{
  position:fixed;
  inset:0;
  z-index:120500;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:22px;

  background:rgba(15,23,42,.60);
  backdrop-filter:blur(3px);
}

.users-management-modal.hidden{
  display:none!important;
}

.users-management-dialog{
  width:min(980px,calc(100vw - 40px));
  max-height:min(90dvh,920px);

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:1px solid var(--border);
  border-radius:22px;

  background:var(--panel);
  box-shadow:0 34px 100px rgba(15,23,42,.34);
}

.users-management-dialog.position-dialog{
  width:min(620px,calc(100vw - 40px));
}

.users-management-modal-head{
  flex:0 0 auto;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;

  min-height:64px;
  padding:12px 16px 12px 22px;

  border-bottom:1px solid var(--border);
  background:var(--panel);
}

.users-management-modal-head strong,
.users-management-modal-head span{
  display:block;
}

.users-management-modal-head strong{
  font-size:14px;
}

.users-management-modal-head span{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}

.users-management-modal-close{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  flex:0 0 auto;

  border:1px solid var(--border);
  border-radius:11px;

  background:transparent;
  color:var(--text);

  cursor:pointer;
  font-size:20px;
}

.users-management-modal-close:hover{
  background:rgba(18,191,166,.08);
  border-color:rgba(18,191,166,.35);
}

/* Existing forms are physically moved here.
   Existing IDs + core handlers stay intact. */

.users-management-dialog #roleEditorPanel,
.users-management-dialog #attendancePayRateForm{
  position:relative!important;
  top:auto!important;

  width:100%;
  min-width:0;
  min-height:0;
  max-height:none!important;

  flex:1 1 auto;

  overflow-y:auto!important;
  overflow-x:hidden!important;

  overscroll-behavior:contain;
  scrollbar-gutter:stable;

  border:0;
  border-radius:0;
  box-shadow:none;

  padding:0 22px;

  background:var(--panel);
}

.users-management-dialog #roleEditorPanel .role-editor-heading{
  position:sticky;
  top:0;
  z-index:10;

  margin:0 -22px 16px;
  padding:18px 22px 14px;

  border-bottom:1px solid var(--border);
  background:var(--panel);
}

.users-management-dialog #attendancePayRateForm{
  padding-top:20px;
}

.users-management-dialog #roleEditorPanel .settings-form-actions,
.users-management-dialog #attendancePayRateForm .settings-form-actions{
  position:sticky;
  bottom:0;
  z-index:10;

  display:flex;
  justify-content:flex-end;
  gap:9px;

  margin:18px -22px 0;
  padding:14px 22px 18px;

  border-top:1px solid var(--border);
  background:var(--panel);

  box-shadow:0 -10px 24px rgba(15,23,42,.05);
}

.users-management-dialog #customRolePermissions{
  min-height:0;
  overflow:visible!important;
}

body.users-management-modal-open{
  overflow:hidden!important;
}

@media(max-width:1250px){
  #customRolesList .role-list-section{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:700px){
  #customRolesList .role-list-section{
    grid-template-columns:1fr;
  }

  .users-management-modal{
    padding:8px;
    align-items:stretch;
  }

  .users-management-dialog,
  .users-management-dialog.position-dialog{
    width:100%;
    max-height:calc(100dvh - 16px);
    border-radius:16px;
  }

  .users-management-dialog #roleEditorPanel,
  .users-management-dialog #attendancePayRateForm{
    padding-left:14px;
    padding-right:14px;
  }
}